tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و
上周简单写了一下2D变换
今天来写写3D变换
三维立体效果我觉得是CSS3中最有意思的地方
不得不佩服那些开发者大神们
让我们能够通过几行CSS代码就能得到酷炫的视觉体验
#浏览器坐标系#
在讲正式语法之前,首先需要了解浏览器坐标系
这需要我们把浏览器界面想象成一个立体的场景
这是网上流传很广的浏览器坐标系图片
从左到右的方向是浏览器x轴的正方向
从上到下的方向是浏览器y轴的正方向
而z轴正方向是面对于我们的
了解这个很重要,因为下面我们旋转元素需要借助它来理解
#3D旋转#
我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度
在三维旋转中稍微要复杂一下
属性当然还是用我们的transform
三维旋转有下面三个函数分别对应三个维度的旋转
- rotateX(xxdeg)
- rotateY(xxdeg)
- rotateZ(xxdeg)
rotateX是让元素绕着x轴旋转,角度越大,元素绕着x轴顺时针旋转
类似于我们的单杠运动
transform: rotateX(45deg);
rotateY是让元素绕着y轴旋转,角度越大,元素绕着y轴顺时针旋转
类似于钢管舞运动…
transform: rotateY(45deg);
rotateZ是让元素绕着z轴旋转,角度越大,元素绕着z轴顺时针旋转
这就是我们在二维平面的旋转,类似于转盘
transform: rotateZ(45deg);
其实3D旋转还有一个合成的函数是rotate3d(num,num,num,deg)
用的不是很多,我就简单说一下
参数并不是我们想那样的3个角度值
而是三个数字一个角度值
前三个数字分别表示绕x、y、z轴旋转的矢量值
最后一个表示在空间的旋转角度,等价关系如下
rotate3d(1,0,0,xxdeg) <> rotateX(xxdeg)
rotate3d(0,1,0,xxdeg) <> rotateY(xxdeg)
rotate3d(0,0,1,xxdeg) <==> rotateZ(xxdeg)
#3D位移与3D缩放#
我们在2D中用到translateX()和translateY()在平面移动
3D中我们多了translateZ()允许我们沿着z轴平移
同样可以使用合成函数translate3d(x,y,z)
注意前两个值可以使用百分比形式,但是沿z轴平移的值只能使用长度值
同理我们的3D缩放
scaleX(num)、scaleY(num)、scaleZ(num)、scale3d(num,num,num)
至于它们的用法下面再通过例子来说
(3D的倾斜属性是不存在的,换句话说,不存在skew3d函数)
#透视/景深属性perspective#
景深这个名词,维基百科是这样就解释的
景深(英语:Depth of field, DOF)景深是指相机对焦点前后相对清晰的成像范围。在光学中,尤其是录影或是摄影,是一个描述在空间中,可以清楚成像的距离范围。虽然透镜只能够将光聚到某一固定的距离,远离此点则会逐渐模糊,但是在某一段特定的距离内,影像模糊的程度是肉眼无法察觉的,这段距离称之为景深。当焦点设在超焦距处时,景深会从超焦距的一半延伸到无限远,对一个固定的光圈值来说,这是最大的景深。
(看到这里,我的手默默的离开了键盘,仰天长叹,心想,这到底要什么样的学历才能看得懂)
我们可以这样来理解
景深就是我们的肉眼距离显示器的距离
景深越大,元素离我们越远,效果就不好
在我们CSS3中,perspective用于激活一个3D空间
属性值就是景深大小(默认none无景深)
有两种用法
.stage {
perspective: 500px;
}
应用景深的元素称为“舞台元素”
舞台元素的所有后代元素都会受影响
(如果后代元素中也添加了perspective属性,效果会叠加而不是覆盖)
<div class="stage">
<div class="demo"></div>
</div>
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
}
.stage .demo {
width: 200px;
height