一，空间转换

1空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

2空间位移

语法transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值);

3透视

使用perspective属性实现透视效果 属性给父级元素添加，取值：像素单位数值， 数值一般在800 – 1200 空间转换时，为元素添加近大远小、近实远虚的视觉效果，不能呈现立体图形

4空间旋转

使用rotate实现元素空间旋转效果 左手法则判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

5立体呈现

使用transform-style: preserve-3d呈现立体图形 添加 transform-style: preserve-3d; 使子元素处于真正的3d空间

6空间缩放

使用scale实现空间缩放效果

二，动画

使用animation添加动画效果

1动画的实现步骤

1.1定义动画

@keyframes 动画名称{ from{} to{} }

@keyframes 动画名称{ 0%{} 25%{} 50%{} 100%{} }

1.2使用动画

animation {动画名称 动画时长}

2动画属性

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 动画执行完毕状态 动画名称和动画时长必须赋值 取值不分先后顺序 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间 forwards：最后一帧状态 backwards：第一帧状态 steps(数字)：逐帧动画 infinite为无限循环 alternate为反向 animation-play-state paused为暂停，通常配合:hover使用

作者：用户3524016323753
链接：https://juejin.cn/post/7063079139892281381/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。