在学习CSS3 3D 变换前我们有必要学习下坐标系,不然各种角度让人觉得很头疼。数学课本中的三维坐标系是右手坐标系,而计算机中的左手坐标系使用较多。
1、左手坐标系
伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图:
2、CSS3中的3D坐标系
CSS3中的3D坐标系与上面的左手坐标系有一定区别的,相当于其绕着X轴旋转了180度。就变成这样了
3、如何判断旋转角度:左手法则
左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲的方向(顺时针方向)。
总结:XYZ轴的正方向分别是:右、下、屏幕外,让轴正向对着自己,顺时针方向就是该轴旋转的方向。
4、透视 perspective
perspective 视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置。
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。这个是美术透视的概念,感觉有点懵。。
注:并非任何情况下需要透视效果,根据开发需要进行设置。
比较通用的距离是设置为800px
perspective有两种写法
a) 作为一个属性,设置给父元素,作用于所有3D转换的子元素
b) 作为transform属性的一个值,做用于元素自身
.class{
perspective: 800px;
}
.class{
transform: prespective(800px)
}
用translateZ做一个实验吧
translateZ()定义 3D 转化,仅使用用于 Z 轴的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box{
width: 300px;
height: 300px;
margin:50px auto;
border: 1px solid #ddd;
position: relative;
}
.test{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255,0,255,0.5);
left:0;
right: 0;
top:0;
bottom: 0;
margin:auto;
transition: all 500ms ease;
/*transform-style:preserve-3d;*/
/*transform: perspective(800px);*/
}
.test:hover{
transform:translateZ(1000px);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
实验的本意是鼠标移到里面盒子的时候,视觉上盒子向屏幕外(Z轴)移动1000px,有放大效果。但在未设置透视距离的时候,没有任何效果。去掉注释后的效果: