服务器之家
您的位置： 首页 编程语言 css

css3——3D动画、transform-style：preserve-3d......

100人浏览   2024-12-04 09:03:07

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度，但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级，

 <style>
 .wrapper{
 position: absolute;
 top: 100px;
 left: 100px;
 width: 100px;
 height: 300px;
 border: 1px solid black;
 transform-style: preserve-3d;
 transform: perspective(500px);
 }
 .wrapper div:nth-of-type(1){
 width: 100px;
 height: 100px;
 background: red;
 transform: rotateX(60deg);
 }
 .wrapper div:nth-of-type(2){
 width: 100px;
 height: 100px;
 background: blue;
 transform: rotateX(60deg);
 }
 .wrapper div:nth-of-type(3){
 width: 100px;
 height: 100px;
 background: green;
 transform: rotateX(60deg);
 }
 </style>
</head>
<body>
 <div class="wrapper">
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

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

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

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

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

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

结果：

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

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

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

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

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

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

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

x	父级盒子宽的相对值，默认50%。值：left、center、right；length；%


y	父级盒子高的相对值，默认50%。值：top、center、bottom；length； %

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

背面是否可以看见

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


相关推荐