css动画

过渡

transition: all 3s 5s linear; all:过渡的属性 3s:过渡的时间 5s:延迟的时间 linear:过渡的速度

2D转换

旋转 transform: rotate(360deg)

位移 transform: translate(200px);

X轴，如果值为正数，那么位移方向向右，负数，位移方向向右左 transform: translate(200px,200px);

X轴，如果值为正数，那么位移方向向右，负数，位移方向向右左 第二个参数，Y轴，如果值为正数，位移方向向下，负数向上 放大缩小 transform: scale(2)

3D 转换

首先有一个3d得空间思维，使用左手法则 开启3D：transform-style: preserve-3d;

动画

animation: 关键帧 动画时间 动画速度 动画次数

animation: myanimation 3s linear 2;

<!-- 定义关键帧 -->

@keyframes myanimation {

0%{ transform: rotateX(0deg); }

40%{ transform: rotateX(-270deg); }

100%{ transform: rotateX(-360deg); } }

或者

@keyframes myanimation {

from{ transform: rotateX(0deg); }

to{ transform: rotateX(-360deg); }

}