CSS3中的3D变换与简易立方体的制作
大家好，这里是demo软件园，今天为大家分享的是css3中的3d变换。
我们首先要知道在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外。CSS的3d变换中，有以下属性：
A.3D旋转：
CSS3中的3D旋转主要包括四个功能函数
rotateX(angle)、
rotateY(angle)、
rotateZ(angle)、等价于rotate(angle)
rotate3d(x,y,z,angle)，x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，元素围绕这条线旋转angle指定的值。
B.3D平移：
transform: translate3d(translateX,translateY,translateZ);
translateZ是3D Transformaton特有的，其他两个2D中就有， translateZ 它不能是百分比值; 那样的移动是没有意义的。
C.3D缩放：
transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);
如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩。
D.景深：让3D场景有近大远小的效果（我们肉眼距离屏幕的距离），是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的），需要注意的是景深是会叠加的，我们要尽量避免景深叠加。
简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）。我们来看看有无景深的效果：
无景深效果图：
有景深效果图：
原理：景深越大 灭点越远 元素变形更小
景深越小 灭点越近 元素变形更大
（灭点：指的是立体图形各条边的延伸线所产生的相交点，透视点的消失点）
景深基点（视角的位置）：perspective-origin：50% 50%；（默认值）
同perspective属性，也是设置在父元素上，对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的
使用景深的两种方式：
transform: perspective(depth)：
depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
perspective: depth：
同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，perspective属性是被用于元素的后代元素，而不是元素本身；就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。
E.transform-style:
这个属性指定了子元素如何在空间中展示,营造有层级的3d舞台，只有两个属性值：flat（默认）和preserve-3d.
flat :表示所有子元素在2D平面呈现，
preserve-3d :表示所有子元素在3D平面呈现，
如果被扁平化，则子元素不会独立的存在于三维空间。它是一个不可继承属性，作用于子元素。
F.隐藏背面：
backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
backface-visibility: keyword;
keyword有两个值，hidden和visible，默认值是visible。
最后，我们根据3d变换基础知识制作简易旋转立方体，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
perspective: 200px;
}
#wrap > .box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transition:4s ;
transform-style: preserve-3d;
transform-origin: center center -50px;
}
#wrap > .box > div{
position: absolute;
width: 100px;
height: 100px;
background: rgba(123,123,123,.2);
text-align: center;
font: 50px/100px "微软雅黑";
transform-origin: center center -50px;
/* backface-visibility: hidden; */
}
#wrap > .box > div:nth-child(6){
transform: rotateX(270DEG);
}
#wrap > .box > div:nth-child(5){
transform: rotateX(90DEG);
}
#wrap > .box > div:nth-child(4){
transform: rotateY(90DEG);
}
#wrap > .box > div:nth-child(3){
transform: rotateY(270DEG);
}
#wrap > .box > div:nth-child(2){
transform: rotateY(180DEG) rotate(180DEG);
}
#wrap > .box > div:nth-child(1){
}
#wrap:hover > .box{
transform: rotate3d(1,2,3,720deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
效果图：
好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！
浙公网安备 33010602011771号