第一部分：CSS Transition

img{
    transition: 1s height, 1s 1s width ease;
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式

transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

第二部分：CSS Animation

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

div:hover {
  animation: 1s rainbow;
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
div:hover {
  animation: 1s rainbow infinite;
}

也可以指定动画具体播放的次数，比如3次。
div:hover {
  animation: 1s rainbow 3;
}

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
div:hover {
  animation: 1s rainbow forwards;
}

animation-fill-mode还可以使用下列值：
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。

同transition一样，animation也是一个简写形式。
div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。
div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

image.png

第三部分：3D转换

https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

//这句话要添加到要做3D转换元素的父元素上，这样他的子元素就都支持3D转换了
transform-style: preserve-3d;

举个例子，为什么女生自拍要躲在背后呢，因为显得脸小,把手机拿的近一些，屏幕里面的脸就越大，加上自拍杆呢，脸就越小。
假设你拿着手机呢，那么你的眼睛就是视点，你设置的perspective的值就是，你眼睛到手机屏幕的水平距离就是，也就是视点到屏幕的值，当perspective的值设置为0的时候，则不产生近大远小的效果，比较像平行投影。

perspective属性的两种书写，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起
.stage {
    perspective: 600px;
}
#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

理解perspective-origin(可以理解为开门的轴)

perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方

image.png

如果你把相机拿到45度，像这只大象一样仰拍呢，就是调整perspective-origin，相机只能在你面前上下左右的改变角度，而不能从你的背后往前拍，也就是Z坐标固定，可以修改的是相机的X，Y 坐标。

在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素,因此，为了切合实际，我们常常会这样设置，使后面元素不可见：

backface-visibility:hidden;

image.png
image.png
image.png