1.3d转换是改变标签在3坐标系上的位置和形状的一种技术
3D特点：
- 近大远小。
- 物体后面遮挡不可见
1.1.3维坐标系
3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的
- x轴 水平向右 注意： x 右边是正值，左边是负值
- y轴 垂直向下 注意： y 下面是正值，上面是负值
- z轴 垂直屏幕 由屏幕里面指向屏幕的外面 注意： 往外面是正值，往里面是负值
2.3d移动translate3d
2.1.视距 perspective（了解）
- 人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大
- perspective视距：就是用来设置 人 和 物体 的距离
上图总结：
（1）d:视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。 (近大远小 ： 视距变小，眼睛离屏幕越来越近，物体离眼睛越来越近，物体变大—-近大 )
（2）z:translateZ，物体距离屏幕的距离，z轴距离与物体大小的关系成正比。 (近大远小：translateZ变大，物体离眼睛越近，物体变大 —– 近大)
（3）z，并不是z轴，其实是translateZ。视距和translateZ其实都是在Z轴上的距离。
（4）perspective ，透视，理解为视距。 （也可以理解为3D眼睛，给元素添加3D效果，并且想看到，必须带上3D眼睛，给父亲添加perspective ）
perspective字面意思是：透视。
e.g.
（1）设置物体的 一般大于 0 如 （2）设置 人和物体的距离 （ 视距） 这个值规定要设置给物体的父元素 （3）动态改变物体的 即可观察效果
注意： 这个效果很像放大效果，但其实是不一样的。
2.2.perspective与translateZ
perspective是给父元素添加的，而translateZ是给自己添加的。
如何使用：
父元素添加一个固定的perspective，子元素再添加translateZ，才会有3D效果。
必须配合使用。
虽然两个都可以让盒子大小改变，但是必须配合使用才行。
让盒子变大变小，一般不会改变perspective，而是是调整translateZ来改变。
2.3.总结：
（1）translateZ的值和perspertive都要大于0 否则容易出现兼容性问题
（2）translateZ：近大远小（translateZ距离近（值越大）物体越大，近大）
（3）translateZ：往外是正值
（4）translateZ：往里是负值
3.3d旋转rotate3d
3.1.介绍
3d旋转指可以让元素在3维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转
语法：
3.2.rotateX
左手准则：
对于元素旋转的方向的判断 我们需要先学习一个左手准则
总结：rotateX( 正值 )，旋转方向是向后倒，向屏幕里旋转。
3.3.rotateY
3.4.rotateZ
3.5.rotate3d-自定义轴（了解）
语法：
- xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
- transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
- transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
理解：
矢量（vector）是一种既有大小又有方向的量，又称为向量。
xyz是矢量，x指定1说明沿着x轴旋转。0说明不沿着x轴旋转。（0，1有大小，又代表x或y或z，也有方向）
4.3D呈现transform-style
4.1.介绍
- 控制子元素是否开启三维立体环境。
- transform-style: flat 子元素不开启3d立体空间 默认的 （flat：平的，平面）
- transform-style: preserve-3d; 子元素开启立体空间（preserve：[prɪˈzɜ:v] 保持）
- 代码写给父级，但是影响的是子盒子
- perspective是开启3D效果，transform-style: preserve-3d是保持3D效果 *
- 这个属性很重要，后面必用
完整代码：
4.2.perspective 和 transform-style 区别
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加
1. 私有前缀
- -moz-：代表 firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表 safari、chrome 私有属性
- -o-：代表 Opera 私有属性
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/168195.html