一、三维坐标系
定义: 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
3d特点: 近大远小、物体后面遮挡不可见
2、3d移动-translate3d
定义: 3d移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向
语法:
transform: translateX(100px); //仅仅在x轴移动100px
transform: translateY(100px); //仅仅在y轴移动100px
transform: translateZ(100px); //仅仅在z轴移动100px(注意: translateZ一般用px单位)
transform: tranlate3d(x, y, z); //其中x,y,z分别指要在移动的轴的方向的距离(不能省略,默认写0)
3、透视-perspective
定义: 在2d平面产生近大远小视觉立体,但只是效果二维
实现原理:
a、如果想要在网页产生3D效果需要透视(理解成3d物体投影在2d平面内)
b、模拟人类的视觉位置.可认为安排一只眼睛去看
c、透视我们也称为视距: 视距就是人的眼睛到屏幕的距离
d、距离视觉点越近的在电脑平面成像越大,越远成像越小
e、透视的单位是像素(px)
语法: perspective: 100px;
透视写在被观察元素的父盒子上
d: 就是视距,视距就是一个距离人的眼睛到屏幕的距离
z: 就是z轴,物体距离屏幕的距离,z轴越大,我们看到的物体就越大
4、translateZ
定义: 仅仅是在z轴上移动,有了透视,就能看到translatZ引起的变化
语法: transform: translateZ(100px);
5、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角度(了解即可) x,y,z表示旋转轴的矢量,是表示你是否希望沿着该轴旋转,最后一个参数deg表示旋转角度
6、3d呈现 transform-style
作用:
·控制子元素是否开启三维立体环境
·transform-style: flat; // 子元素不开启3d立体空间(默认)
·transform-style: preserve-3d; // 子元素开启立体空间
·代码写给父级,但是影响的是子元素
·这个属性很重要
二、浏览器私有前缀
原因: 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加
1、私有前缀
-moz-:代表firefox浏览器私有属性
-ms-: 代表ie浏览器私有属性
-webkit-: 代表safari、chrome私有属性
-o-: 代表Opera私有属性
2、提倡写法
例如圆角语法
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
3、 总结
三、后续补注
1、背景线性渐变
语法:
background: linear-gradient(起始方向， 颜色1， 颜色2，...);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);
注意:
背景渐变必须添加浏览器私有前缀
起始方向可以是: 方位名词或者度数，如果省略默认就是top
