一、 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. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐