CSS 2D、3D转换、过渡和动画效果

2D转换

2D转换的内容：对元素进行旋转、缩放、移动、拉伸。运用的CSS属性是 transform属性

transform属性：

取值：

1.rorate( deg)函数：对元素进行旋转，旋转中心为元素的几何中心，括号里的参数是角度（正值：顺时针旋转相应角度；负值：逆时针旋转相应角度）。
例：

2.scale(x,y)函数：对元素进行缩放；x: 水平方向缩放的倍数；y：垂直方向的缩放倍数，若省略，与x相同；x,y取值0~1时时缩小，>1时时放大。

3D转换

设置在父元素中，使子元素保留3d变换效果：transform-style: preserve-3d
tranform:rotateX():绕x轴旋转
tranform：rotateY():绕Y轴旋转
tranform：rotateZ（）：绕Z轴旋转
perspective属性： 为一个元素设置三维透视的距离，使离得近的大，离得远的小
例：

过渡与动画效果

过渡

transition属性：将元素的某一属性从“一个值”在指定时间内过渡到“另一个值”

transition:属性名 持续时间 过渡方法
transition-property : 属性名|all （对哪个属性进行变化）
transition-duration: 持续时间（单位可为s、ms）
transition-timing-function: 过渡方法（函数）

例：将鼠标放在盒子上时1s内背景颜色就会匀速变为绿色

动画

当需要过渡多个状态的动画效果时，就需要使用animation属性.

使用animation属性时需要几步：第一步，定义动画，使用@keyframes规则，定义出动画内的“关键帧”。第二步，调用动画
例：

animation的子属性与transition相似：
其中animation-play-state属性表示动画播放的状态，比如可以设置当鼠标悬浮的时候动画为停止状态（paused）。