1.3D坐标系
3D坐标系比2D多了一个z轴
![](https://i-blog.csdnimg.cn/blog_migrate/4eecf96d44248df3e52a6c107a32b461.png)
注意点:3个坐标轴取值的正反
X 轴 往右越大,是正值,反之为负值
Y 轴 往下越大,是正值,反之为负值
Z 轴(指向我们)越大,是正值,反之(指向屏幕内)为负值
3D位移
完整语法书写:
![](https://i-blog.csdnimg.cn/blog_migrate/059d4f5445261f8f1be7fbd4979ae1bb.png)
不过再很多情况下,我们都会分开书写:
![](https://i-blog.csdnimg.cn/blog_migrate/b451fbc658fb5c6a7d34c9c5cae333d0.png)
透视
透视的作用:空间转换时,为元素添加远近大小、近视远虚的视觉效果。
语法书写:
![](https://i-blog.csdnimg.cn/blog_migrate/6c457e3c237881c4d041ecd0f1c756c9.png)
透视注意事项:
取值范围经常在800px-1200px之间。
一定要给父元素添加。
透视距离也称作为视距,视距是指人的眼睛到电脑屏幕的距离。
其中d为透视的距离
z时translate Z的距离,这个距离靠近我们,盒子越大
![](https://i-blog.csdnimg.cn/blog_migrate/fc6be5addfe6750bf589eb6d8a5c0859.png)
3D旋转
有了透视的加持,我们3d旋转效果会比较明显。
rotateX
类似于单杠旋转。
![](https://i-blog.csdnimg.cn/blog_migrate/751c0c671b4297652362805418d25874.gif)
注意点:默认得旋转中心在盒子的中心位置。
![](https://i-blog.csdnimg.cn/blog_migrate/9e100e419eb63bc319b93927961411c8.png)
效果展示:
![](https://i-blog.csdnimg.cn/blog_migrate/71258eb4127f4be4517ac845645a572f.png)
rotateY
该轴的旋转方式类似于钢管舞。
![](https://i-blog.csdnimg.cn/blog_migrate/382591d5c34b04fdc518e3329127d18d.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/389c88c556eb51dee23946bbf2513f83.png)
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/2c178af93c9fe1e5593f563cd138ebb5.png)
左手法则
一定要搞清楚X轴和Y轴是如何旋转的,旋转的度数是正值还是负值。
![](https://i-blog.csdnimg.cn/blog_migrate/ee8cf5ac24265da13860c2a0b4ed80e6.png)
规则:
大拇指指向X轴正向方(右),则四指指向的方向是旋转的方向
大拇指指向Y轴正向方(下),则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示,此时可以给父元素添加
代码书写:
![](https://i-blog.csdnimg.cn/blog_migrate/80a11f6d47bb5263a9a3bb50368a20e2.png)
2.动画(重点)
数据在网络上是以很小的单位称为帧(Frame)传输的,帧由几部分组成,不同的部分执行不同的功能
动画最大的特点就是可以不用鼠标触发,自动的,反复的执行某些动画。
动画使用分为定义和调用:
定义:
![](https://i-blog.csdnimg.cn/blog_migrate/d603f98b4aac6d7339e22bd9183bf3f0.png)
或者是
![](https://i-blog.csdnimg.cn/blog_migrate/b63944d11383c4c4950306b61ed9a83f.png)
调用:
![](https://i-blog.csdnimg.cn/blog_migrate/c141aa268771974e0acb74b61d8de8f4.png)
动画属性
animation: 动画名字 动画执行时间 动画的速度 延迟时间 循环次数 动画的方向 动画完毕的状态;
animation: move 4s linear 2s infinite alternate forwards;
动画的的名字参照css类选择器命名
动画时长和延迟时间单位都为s
infinate 无限循环动画(重复次数)
alternate 为反向 就是左右来回执行动画(跑马灯)
forwards 动画结束停留在最后一帧状态,不能和循环状态使用
linear 让动画匀速执行
注意点:动画结束状态无法和动画的重复次数以及‘
动画的方向一起使用
鼠标经过暂停动画
![](https://i-blog.csdnimg.cn/blog_migrate/6c8069c02b609d1200e2a62cf4331e0e.png)
多组动画
![](https://i-blog.csdnimg.cn/blog_migrate/40cb360331df91016ddab1bf88a51a64.png)
注意:多组动画用“,”隔开