您的位置：首页 > Web前端 > CSS

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

2018-09-30 15:59 176 查看

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

[code]    <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属性的空间直角坐标系是相对每一个物体本身的，即任何一个物体都有自己的空间直角坐标系。当然如果父级物体沿着自己的轴转动，就会出现子级相对父级的轴旋转的效果。

练习：写一个旋转木马

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航