技术文章 | Technical articles

web前端_css 3d了解一下【爱创课堂专业前端培训】

一、 3D

2d是平面

2d的坐标系: x + y

x: 正方向向右  y: 正方向向下

 

3d是立体

3d的坐标系: x + y + z

x: 正方向向右, y: 正方向向下, z: 垂直于屏幕

 

1.1 translateZ

该属性是transform的一个子属性,表示元素沿着自身坐标系z轴移动多少像素

img {

/*演员移动的距离*/

transform: translateZ(100px);

}

但是只有该条语句的时候, 将没有任何效果

要给父元素添加perspective: xxpx

表示,此时元素距离屏幕的距离

举例:

父元素 {

    perspective:  3000px;    // 表示父元素距离,屏幕3000px

}

子元素 {

    transform: translateZ(100px) ;  // 表示子元素从距离屏幕3000px的位置移动到举例屏幕2900px的位置

}

此时, 看上去效果不大

 

再比如:

父元素 {

    perspective:  101px;    // 表示父元素距离,屏幕101px

10 }

11 子元素 {

12     transform: translateZ(100px) ;  // 表示子元素从距离屏幕101px的位置移动到举例屏幕1px的位置

13 }

此时, 看上去效果特别大

所以,当只有一个translateZ属性的时候, 浏览器不知道该以什么样的形式变化

所以,必须给父元素添加perspective属性

 

1.2 perspective

景深: 决定元素到屏幕的距离

举例:

#box {

width: 560px;

height: 300px;

margin: 0 auto;

border: 1px solid red;

/*确定舞台的距离*/

perspective: 101px;

}

 

1.3 transform-style: perserve-3d

让子元素保留3d效果


当没有该条属性的时候:

图片1.png

 

加上transform-style: perserve-3d属性之后:

 

图片2.png

 

1.4 scaleZ

scale是缩放的意思,一个元素之后高度和宽度没有厚度的概念,所以给一个元素添加scaleZ是没有意义的

给一个具备立体样式容器元素添加scaleZ,将体现在该元素的子元素身上

 

举例: 一个元素

图片3.png

 

添加属性transform: scaleX(2)

图片4.png

 

添加属性transform: scaleY(2)

图片5.png

 

添加属性: transform: rotateY(90deg) sacleZ(2)

 

图片6.png 

 

 接下来, 我们把该元素变为具备立体样式的容器元素:

<div>   // 此时 box 变为具备立体样式的容器元素

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

 


添加属性 transform: scaleX(2)

图片7.png

 

添加属性 transform: scaleY(2)

 

图片8.png

 

添加属性 transform: scaleZ(2)

 

图片9.png

综合结论: 当给一个元素添加scaleZ是没有意义的, 只有当一个元素成为有立体样式的容器元素的时候,此时添加scaleZ,将体现在子元素身上

 

1.5 backface-vicibility

默认情况下图片背面是可见状态

 

图片的正面:

图片10.png

 

图片的背面:

图片11.png

 

 

加上backface-vicibility: hidden

图片的背面:

图片12.png

 

1.6 改变旋转轴中心

transform-origin: 接受两个参数

可以是单词法

可以是像素法

可以百分比

默认是 50% 50%

 

图片13.png

 

改变旋转轴中心为左上角:

img {

/*改变旋转中心为左上角*/

transform-origin: left top;

transform: rotateZ(45deg);

}

 

图片14.png

 

改变旋转轴中心到 50px 50px的位置:

img {

/*transform-origin: 50px 50px;*/

transform: rotateZ(45deg);

}

图片15.png 

 

 

 

 

 

改变旋转轴中心到右侧中间部分:

img {

/*改变旋转轴中心*/

transform-origin: 100% 50%;

transform: rotateZ(45deg);

}

 

图片16.png

 

下午复习:

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

上一篇文章: 前端_移动端开发
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>