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