黑马程序员技术交流社区

标题: 学习笔记 [打印本页]

作者: zh930233132 时间: 2019-9-25 19:49
标题: 学习笔记
3D移动 translate3d
transform:translate3d(x,y,z) ,translform:translateZ(100px) 仅仅是移动在Z轴上移动.往外正值，往里负值。
视距 perspective:近大远小,物体在z轴上移动，离眼睛越近看上去越大。这个值规定要设置给物体的父元素。

3D旋转 rotate3d
transform:rotateX(45deg)：沿着x轴正方向旋转 45度
左手准则：
1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

3D呈现 transform-style
控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启3d立体空间  默认的（flat：平的，平面）

- transform-style: preserve-3d; 子元素开启立体空间  （preserve：[prɪˈzɜ:v] 保持）

- 代码写给父级，但是影响的是子盒子

私有前缀

-moz-：代表 firefox 浏览器私有属性  （moz：Mozilla，firefox由Mozilla打造）

-ms-：代表 ie 浏览器私有属性（ms：Microsoft）

-webkit-：代表 safari、chrome 私有属性（这俩浏览器的内核为webkit）

-o-：代表 Opera 私有属性（o：opear缩写）

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2