3D转换
- 一、三维坐标系
- 二、3D移动translate3d
- 三、透视perspective
- 四、translateZ
- 五、3D旋转rotate3d
- 六、3D呈现 transform-style
- 七、浏览器私有前缀
-
- 7.1 私有前缀
- 7.2 提倡写法
一、三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
- x轴:水平向右 注意:x右边是正值,左边是负值
- y轴:垂直向下 注意:y下面是正值,上面是负值
- z轴:垂直屏幕 注意:往外面是正值,往里面是负值
二、3D移动translate3d
3d移动在3d移动的基础上加了一个可以移动的方向,就是z轴方向
- transform: translateX(10px): 仅仅在x轴上移动
- transform: translateY(10px): 仅仅在y轴上移动
- transform: translateZ(10px): 仅仅在z轴上移动 (注意:translateZ一般用px单位)
- transform: translate3d(x,y,z): 其中x,y,z分别值要移动的轴的方向的距离
三、透视perspective
在2D平面产生近大远小的视觉立体,但是知只是效果是二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面的
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大
四、translateZ
transform: translateZ(100px):仅仅是在z轴上移动,有了透视,就能看到translateZ引起的变化了
五、3D旋转rotate3d
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转
语法:
- transform: rotateX(45deg): 沿着x轴正方向旋转45度
- transform: rotateY(45deg): 沿着y轴正方向旋转45度
- transform: rotateZ(45deg): 沿着z轴正方向旋转45度
- transform: rotate3d(x,y,z,45deg): 沿着自定义轴旋转45度
transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度,xyz表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度
- transform: rotate3d(1,0,0,deg)就是沿着x轴旋转45deg
- transform: rotate3d(1,1,0,deg)就是沿着x轴和y轴对角线旋转45deg
左手准则:
- 左手的拇指方向指向x/y/z轴的正方向
- 其余手指弯曲的方向就是该元素沿着x/y/z轴旋转的方向
六、3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat子元素不开启3d立体空间 默认的
- transform-style:preserve-3d子元素开启立体空间
- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
七、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加
7.1 私有前缀
- -moz:代表firefox浏览器私有属性
- -ms: 代表ie浏览器私有属性
- -webkit:代表safari、chrome私有属性
- -o-:代表Opera私有属性
7.2 提倡写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;