2018-01-07/css 3D

perspective

说起css 3d 不得不说的一个属性就是perspective（透视点）；个人的理解就是你的眼球到一件物品的距离。近大远小。
当一个正方形离你越近的时候，越靠近你的边就越长，稍微离你远一点的边就短一点。
当正方形离你距离足够远的时候。你看它的边长就越趋近于相等。
以下是不同的perspective距离下的翻转rotateX（30deg）的正方形：

perspective值为200px时

perspective值为700px时

、

perspective有两中写法。

1.当应用在父容器中时。

.parent{
    perspective : 800px;
}
.son{
   transform ： rotateX（30deg）;
}

2.当应用在子元素中时

.son{
  transform : perspective(800px) rotateX(30deg);
}

区别
应用在不同的地方，当然有不一样的效果。
当应用在父元素中时，它是以父元素的中心点正前方为视点（就假设你的视点在父元素的中点（X轴和Y轴中心）的正前方。）
当应用在子元素中时，每个子元素都有独自的视点（子元素的中心点正前方）
以下是效果图：

初始效果

当在父元素中应用perspective时

当在子元素中应用perspective时

从上面可以看出，当在父元素中应用perspective时，每个子元素虽然Y翻转的度数一样。但是每个子元素看上去都不一样。
而子元素中应用perspective时，每个子元素看上去都一样！

translateZ（px）；

transform：translateZ（200px）

translateX/Y就不解释了。
translateZ就是用来位移元素的前后距离的（看下面那个图大概就懂）因此可以用来调整元素与视距点的距离！translateZ的距离不能超过perspective值。也不是说不能超过，只是超过后，元素就看不见了。因为元素跑到视距点后面去了（我们总不能脸朝着前面，却看到后面的东西吧）

在不设perspective的情况下浏览器的默认perspective值为201px

重识rotate（）

在默认情况下，

transform：rotate（deg） =  transform：rotateZ（deg）

效果沿着中心原点顺时针/逆时针旋转（在平面上）
既然有了rotateZ（），那肯定有rotateX（）、rotateY（）！嗯，没错
先祭出这张3D图

图片.png

1. rotateX（deg）
   沿着X轴翻转

   
   
   

   图片.png

2. rotateY（deg）
   沿着Y轴翻转

   
   
   

   图片.png

3. rotateZ （deg）
   沿着Z轴翻转

   
   
   

   图片.png

注：

这三个属性，都是3d属性。如果单纯的设置这三个属性（或其中一个），看起来就是2d效果。如图：

单纯的设置rotateX

那如何拥有3d效果咧？emmm...其实就是要有透视点，即在父元素，或者子元素中添加perspective属性。

添加perspective后

transform-style : flat | preserve-3d

transform-style属性确定元素的子元素是否位于3D空间中，还是在该元素所在的平面内被扁平化。

preserve-3d
指定子元素定位在三维空间内。
flat
指定子元素位于此元素所在平面内。

flat

preserve-3d

应用flat的元素（容器），则该元素看上去就是2d的。
而preserve-3d的元素，则定位在3维空间内。

backface-visibility : visible | hidden

这个指定元素背面是否可见。
废话少说，看例子

visible

元素Y轴翻转180度后，齐内容显示正面的镜像。

hidden

使用hidden属性后。元素翻转超过90度就会被隐藏！