一、 3D
2d是平面
2d的坐标系： x + y
x: 正方向向右 y: 正方向向下
3d是立体
3d的坐标系: x + y + z
x: 正方向向右， y: 正方向向下， z: 垂直于屏幕
1.1 translateZ
该属性是transform的一个子属性，表示元素沿着自身坐标系z轴移动多少像素
1 img { 2 /*演员移动的距离*/ 3 transform: translateZ(100px); 4 } |
但是只有该条语句的时候， 将没有任何效果
要给父元素添加perspective: xxpx
表示，此时元素距离屏幕的距离
举例：
1 父元素 { 2 perspective: 3000px; // 表示父元素距离，屏幕3000px 3 } 4 子元素 { 5 transform: translateZ(100px) ; // 表示子元素从距离屏幕3000px的位置移动到举例屏幕2900px的位置 6 } 7 此时， 看上去效果不大 |
再比如：
8 父元素 { 9 perspective: 101px; // 表示父元素距离，屏幕101px 10 } 11 子元素 { 12 transform: translateZ(100px) ; // 表示子元素从距离屏幕101px的位置移动到举例屏幕1px的位置 13 } 1 此时， 看上去效果特别大 |
所以，当只有一个translateZ属性的时候， 浏览器不知道该以什么样的形式变化
所以，必须给父元素添加perspective属性
1.2 perspective
景深： 决定元素到屏幕的距离
举例：
1 #box { 2 width: 560px; 3 height: 300px; 4 margin: 0 auto; 5 border: 1px solid red; 6 /*确定舞台的距离*/ 7 perspective: 101px; 8 } |
1.3 transform-style: perserve-3d
让子元素保留3d效果
当没有该条属性的时候：
1 |
加上transform-style: perserve-3d属性之后：
1 |
1.4 scaleZ
scale是缩放的意思，一个元素之后高度和宽度没有厚度的概念，所以给一个元素添加scaleZ是没有意义的
给一个具备立体样式容器元素添加scaleZ，将体现在该元素的子元素身上
举例： 一个元素
1 |
添加属性transform: scaleX(2)
1 |
添加属性transform: scaleY(2)
1 |
添加属性： transform: rotateY(90deg) sacleZ(2)
接下来， 我们把该元素变为具备立体样式的容器元素：
1 <div> // 此时 box 变为具备立体样式的容器元素 2 <div></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 <div></div> 7 <div></div> 8 </div> |
添加属性 transform: scaleX(2)
1 |
添加属性 transform: scaleY(2)
1 |
添加属性 transform: scaleZ(2)
1 |
综合结论： 当给一个元素添加scaleZ是没有意义的， 只有当一个元素成为有立体样式的容器元素的时候，此时添加scaleZ，将体现在子元素身上
1.5 backface-vicibility
默认情况下图片背面是可见状态
图片的正面：
1 |
图片的背面：
1 |
加上backface-vicibility: hidden
图片的背面：
1 |
1.6 改变旋转轴中心
transform-origin: 接受两个参数
可以是单词法
可以是像素法
可以百分比
默认是 50% 50%
1 |
改变旋转轴中心为左上角：
1 img { 2 /*改变旋转中心为左上角*/ 3 transform-origin: left top; 4 transform: rotateZ(45deg); 5 } |
1 |
改变旋转轴中心到 50px 50px的位置：
1 img { 2 3 /*transform-origin: 50px 50px;*/ 4 transform: rotateZ(45deg); 5 } |
|
改变旋转轴中心到右侧中间部分：
1 img { 2 /*改变旋转轴中心*/ 3 transform-origin: 100% 50%; 4 transform: rotateZ(45deg); 5 } |
6 |
下午复习:
2d的坐标系： x + y
x: 正方向向右 y : 正方向向下
3d的坐标系： x + y + z
x: 正方向向右 y : 正方向向下 z: 垂直于屏幕
translateZ: 表示元素沿着自身坐标轴z轴移动多少像素
当只有该条代码，将没有任何效果
必须给父元素添加perspective: xxpx
表示元素距离屏幕的距离
perspective
景深：表示元素距离屏幕的距离
transform-style: perserve-3d
让子元素保留3d效果
scaleZ:
scale是缩放的意思
因为一个元素只有高度和宽度没有厚度的概念，所以给一个元素添加scaleZ是没有意义的
当成为某具体立体样式的容器元素的时候添加scaleZ 将体现在子元素身上
背面不可见：
backface-visibility: hidden
改变旋转轴中心：
transform-origin: 接受两个参数
可以是单词法
可以是像素法
可以百分比
扫描下方二维码添加微信：haomei0452，领取 前端资料、项目实战视频教程 ！
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
