3D转换
3D特点:近大远小 物体后面遮挡看不见
- 3D位移 translate3d(x,y,z)
- 3D旋转 rotate3d(x,y,z)
- 透视 perspective
- 3D呈现 transfrom-style
1.三维坐标系:
三维坐标系:就是指立体空间,立体空间由3个轴共同组成
x轴
:水平向右 注意:x右边是正值,左边是负值
y轴
:垂直向下 注意: y下面是正值,上面是负值
z轴
:垂直屏幕 注意: 往外面是正值,往里面是负值
2. 3D移动 translate3d
3D
移动就是在2D
移动的基础上多加了一个可以移动的方向,就是 z 轴方向transform: translateX(100px)
:仅仅是在 x 轴上移动transform: translateY(100px)
:仅仅是在 y 轴上移动transform: translateZ(100px)
:仅仅是在 z 轴上移动。(注意:后面的单位我们一般跟px)transform: translate3d(x, y, z)
:其中x、y、z 分别指要移动的轴的方向的距离- 注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充 :例如:
transform:translate(0,100px ,100px);
语法:transform: translateZ(100px);
向外移动100px(向我们眼前阿里移动) (页面看不出效果,需要和透视一起使用)
3. 透视 perspective
如果想要在页面上呈现立体效果,就加透视。透视写在被观察元素父元素上
3.1 透视相关
在2D平面上产生近大远小视觉立体,但是只是效果是二维的
- 如果想要网页产生
3D
效果需要透视(理解成3D
物体投影的2D
平面上) - 实际上模仿人类的视觉位置,可视为安排一直眼睛去看
- 透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
3.2 知识要点:
透视需要写在被视察元素的父盒子上面
- 注意下方图片
-
d:就是视距,视距就是指人的眼睛到屏幕的距离
-
z:就是 z 轴,z 轴越大(正值),我们看到的物体就越大
-
透视越小,人的眼睛到屏幕的距离越近,看到的盒子越大
-
perspective:500px;
-
4. 透视perspective
和translateZ
-
d: 就是视距,视距就是指人的眼睛到屏幕的距离
-
z: 就是 z 轴,z 轴越大(正值),我们看到的物体就越大
-
translateZ
与perspecitve
的区别perspecitve
给父级进行设置,translateZ
给 子元素进行设置不同的大小
5. 3D旋转
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
5.1 语法
transform: rotateX(45deg)
– 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)
– 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)
– 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)
– 沿着自定义轴旋转 45 deg 为角度
旋转方向:左手准则
5.2 rotate3d
transform: rotate3d(x, y, z, deg)
– 沿着自定义轴旋转 deg 为角度- x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
transform: rotate3d(1, 1, 0, 45deg)
– 沿着对角线旋转 45degtransform: rotate3d(1, 0, 0, 45deg)
– 沿着 x 轴旋转 45deg
6. 3D呈现transfrom-style
- 控制子元素是否开启三维立体环境
transform-style: flat
代表子元素不开启3D
立体空间,默认的transform-style: preserve-3d
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
7. 流浪器私有前缀
浏览器私有前缀是为了兼容老版本的写法;新版本的浏览器无需添加
7.1 私有前缀
-moz-
:代表firefox浏览器私有属性-ms-
:代表ie浏览器私有属性-webkit-
:代表safari、chrome私有属性-o-
:代表Opera私有属性
例如:圆角(border-radius),提倡写法:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;