CSS3 3D变形

1.3D变换的功能函数：

在拥有水平和垂直轴线的二维变形的基础上，再加上一个Z轴，就可以进军三维变形啦(●’◡’●)，三维变换基于二维变换的属性，很多变换函数功能相似。

3D位移：translateZ()，translate3d()

3D旋转：rotateX()，rotateY()，rotateZ(),rotate3d()

3D缩放：scaleZ()和scale3d()

3D倾斜：(◎﹏◎)我以为有什么Z轴的倾斜的，果然，太年起~

2. 3D变形需要的属性：

1. transform-style：preserve-3d 来建立3D空间

transform-style:flat | preserve-3d

注意：该属性设置在父元素上，并且高于任何嵌套的变形元素（即变形元素的共同父元素上）。指定了该属性的元素的所有子元素都会位于3D空间中。

2. perspective: 景深！简而言之，就是视距，人眼睛到显示器的距离！用户和元素3D空间中Z平面之间的距离。不信你试试去掉这属性还有3D效果吗。。。

prespective:none | length

prespective 取值越小，3D效果越明显，眼睛越接近真3D；而当值无穷大，或为0时与取值为none效果一样。



拓展：prespective()函数与perspective属性

共同点：都可以激活3D空间；

不同点：perspective属性用在舞台元素上（变形元素的共同父元素）；而perspective()函数用在当前变形元素上，可以和其他的变形函数一起使用。

//加在父级创建3D空间，子元素都有
.stage{
perspective:800px;
}
//加在子级也可以创建3D空间，但只是它有3D效果
.stage .box{
transform:perspective(800px);
}

3. perspective-origin: 用户在什么角度位置看物体！

perspective-origin: x-axis y-axis;



注意：

1.当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

2.该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

4. backface-visibility属性：元素旋转背面是否可见。

backface-visibility:visible|hidden

简单来讲，该属性用于隐藏内容的背面，默认背面可见，旋转后背面的内容仍可见。如果在旋转元素不希望看到其背面时，该属性很有用。这个在旋转展示内容的时候很重要！！！

对了？(●’◡’●)，它是用在旋转元素上呢还是旋转元素上呢？这是坑，用在翻转的两面元素上！翻转的两面元素上！两面元素上！

.wrap{
position: relative;width:100px;height:100px;
border:1px solid red;
position: relative;
perspective: 800px;
transition: all 1s linear;
transform-style:preserve-3d;

}
.font{
width:100px;height:100px;
position: absolute;
top:0px;left:0;
backface-visibility: hidden; //背面不可见
background: red;
z-index:2;//层级关系

}
.back{
width:100px;height:100px;
position: absolute;
top:0px;left:0;
background: blue;
backface-visibility: hidden;//背面不可见
transform:rotateX(180deg);
}

3.3D变形函数介绍：

3D位移函数：

1. translate3d()函数：

transform:translate3d(tx,ty,tz)

tz不能是一个百分比值，否则无效。z轴越大，元素离用户越近，反之，你懂的！正大负小！

2. translateZ()函数

transform:translatez(t)

同样不能取百分比值，否则无效。z轴越大，元素离用户越近，反之，你懂的！正大负小！观察效果可能不同，可以设置perspective-origion来修改基准点角度。

3D缩放函数：

1.scale()函数：

scale3d(sx,sy,sz)

scaleZ(s)

卧槽。没效果？这两个函数单独使用是没有效果的，要配合其他变形函数一起使用才会有效果。多踩坑，以后就少踩点(●’◡’●)

3D旋转函数：

rotateX(a):绕着x轴旋转

rotateY(a)：绕着y轴旋转

rotateZ(a)：这个跟2D旋转相同，顺逆时针旋转

rotate3d(x,y,z,a) //前三者不同值时，和前三个函数功能等同

4.多重变形

transform:rotateZ(45deg) scale(2) … … … ;

就是这么简单粗暴！但是！同一元素在使用多种变形时，多重变形的顺序不同，效果可能也就不同！

//先移动，后旋转，再缩放
.box2{
width:100px;height:100px;
position: absolute;
left:0;top:0;

background:green;
transform:translate(100px,100px) rotate(45deg) scale(1.5);
}
//旋转，再缩放，后移动
.box3{
width:100px;height:100px;
position: absolute;
left:0;top:0;
background:#ccc;
transform:rotate(45deg) scale(1.5) translate(100px,100px);

}
出来的效果可能是不同的，这个变形的顺序要知道，避免不必要的坑！