我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
特点:
- 近大远小;
- 物体后面遮挡不可见。
当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。
三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向左 注意:x右边是正值,左边是负值
- y轴:垂直向下 注意:y下面是正值,上面是负值
- z轴:垂直屏幕 注意:往外面是正值,往里面是负值
3D移动translate3d
3D移动在2D基础上多加了可以移动的方向,就是z轴方向
- transform: translateX(100px);:仅仅是在x轴上移动;
- transform: translateY(100px);:仅仅是在y轴上移动;
- transform: translateZ(100px);:仅仅是在z轴上移动(注意:translateZ一般用px单位);
- transform: translate3d(x,y,z);:其中x y z分别指要移动的轴的方向的距离。(x y z是不能省略的 如果没有就写0)
透视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,deg):沿着自定义轴正方向旋转 deg为角度(了解即可)。
3D呈现transform-style
- 控制元素是否开启三维立体环境;
- transform-style:flat 子元素不开启3d立体空间 默认的
- transform-style:preserve-3d;子元素开启立体空间;
- 代码写给父级,但是影响的是子盒子;
- 这个属性很重要,后面必用。