css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

妖狐艹你老母 2022-05-09 03:30 299阅读 0赞

**1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果**

注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。

**2. transform：perspective；景深，观察者到物体的距离；单位：px，比如：transform：perspective(500px);**

英语：perspective：透镜，望远镜;观点，看法;远景，景色;洞察力

（1）该属性设置在父级元素中，对于子级元素而言，都只有一个公共的视角

比如：该例子中，**父级设置3d属性，设置景深**；**三个子级元素的旋转角度都是 60度，**但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级，

![70][]

**注意：保留3d+景深+旋转 == 才会看到3d效果**

（2）如果transform：perspective设置在子级元素中，对每个子级进行单独的视角设置

**注意：transform属性要复合写，不然会覆盖无效。**

而且，**属性有先后：transform: perspective(500px) rotateX(60deg);**

比如：三个子级的景深：transform: perspective(**500px**) rotateX(**60deg**);

结果：

![70 1][]

如果其中一个的景深是：transform: perspective(**100px**) rotateX(60deg);

结果：**景深太小，视角距离物体越近，那么看着物体会变大**。

![70 2][]

**3. perspective-origin：深源，也是视角的位置，确定了视角在水平面的位置**；景深确定的是：垂直高度

这样才能确定视角在空间中的位置。**父级属性，默认情况下，在父级容器中心 50% 50%**

**对于 Chrome 和 Safari 用户:** 为了更好地理解perspective-Origin属性，请查看 [查看实例][Link 1].

因为视角位置的改变，看到的物体样子也发生变化，[物体的移动效果，直接看实例][Link 1]

**注意：transform：perspective()；和 perspective-origin；两个属性都是设置在父级中，才有效果，是两个关联的属性**

<table style="width:652px;"> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td style="width:602px;">父级盒子宽的相对值，默认50%。值：left、center、right；length；%</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td style="width:602px;">父级盒子高的相对值，默认50%。值：top、center、bottom；length； %</td> 
  </tr> 
 </tbody> 
</table>

4. backface-visibility：visible(可见) | hidden(隐藏)

背面是否可以看见

5. 转轴：css3属性的空间直角坐标系是相对每一个物体本身的，即任何一个物体都有自己的空间直角坐标系。当然如果父级物体沿着自己的轴转动，就会出现子级相对父级的轴旋转的效果。

练习：写一个旋转木马

[70]: /images/20220509/7f68cc66ce904ef7aaed609d52c5c758.png
[70 1]: /images/20220509/2a2bfa437e8e4eadab8c3e567b0f42ba.png
[70 2]: /images/20220509/1a9ecde035144c6bb0624808f8120ee0.png
[Link 1]: http://www.runoob.com/try/try.php?filename=trycss3_perspective-origin_inuse