8.23_3D转换

3D转换

特点：

• 近大远小
• 物体后遮挡物看不到

3d坐标轴

3D位移 translate3d

相比起2d移动多了z轴

语法：

3D移动简写：

transform: translate3d(x,y,z)

注：

• xyz不能省略 没有写0
• z轴单位px
• z轴搭配透视一起使用

※3D透视 perspective

语法：

div {
	perspective:200px
	/* 透视一般为200-500px */ 
}

注：

• 数值越小 物体越大 数值越大 物体小 透视的数值一般500px
• 形象描述就是 眼睛凑得越近 物体越大 越远物体越小
• 透视可继承 透视写在被观察元素的上级盒子上 最大到body
• 透视位置在设置元素的中心上 perspective-orgin改变透视位置

3D旋转 rotate3d

3D旋转是可以让元素在三尾平面内沿着 x y z轴或者自定义轴进行旋转

transform:rotateX(45deg) /* 沿着x轴正方向旋转45度 */
transform:rotateY(45deg) /* 沿着y轴正方向旋转45度 */
transform:rotateZ(45deg) /* 沿着z轴正方向旋转45度 */
transform:rotate3d(45deg) /* 沿着自定义轴正方向旋转45度 */

注：

• 旋转正反记忆 左手法则： 握把手向上正 握把手相反负 拇指对着中心点

综合写法 ：和2d同理 空格隔开 位移一样放在最前面

※3D呈现效果 transfrom-style

• 控制子元素是否开启三维立体环境
• transform-style：flat 子元素默认不开启立体空间
• transform-style：preserve-3d 开启子元素立体空间
• 写在父盒子上 受到影响的是子盒子

和透视的区别在于:

• 呈现效果只能给亲父盒子加 实现效果的是子盒子

块级元素不能嵌套块级元素 会出现bug 浏览器渲染出来的div并不是p的子盒子 p标签中不能放div标签 因为是块级标签

私有前缀

作用：解决一些浏览器兼容的问题

先写私有前缀 后写基本样式

• -moz- 代表火狐浏览器
• -ms- 代表ie浏览器
• -webkit- 代表谷歌 safari 浏览器
• -o- 代表欧朋Opera浏览器