一,变换风格
1,转换风格的属性是三维空间一个重要属性,指定嵌套元素如何在3D空间中呈现。
有两个属性值:flat和preserve-3d。
transform-style属性的使用语法非常简单:transform-style:flat | 保留-3D
其中平坦值为默认值,表示所有子元素在2D平面呈现。
2,保持-3D表示所有子元素在 3D空间中呈现。
如果对一个元素设置了变换式的值为平,则该元素的所有子元素都将被平展到该元素的二维平面中进行呈现。沿着X轴或ý轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。
二,透视属性
透视属性对于三维变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥,继而投到一个 2D平面视上。如果不指定透视,则ž轴空间中的所有点将平铺到同一个二维平面视中,并且变换结果中将不存在景深概念。
其实对于立体属性,可以我们简单的理解为视距,设置用来用户状语从句:元素3D空间ž平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间ž平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。在3D变形中,对于某些变形,例如下面的示例演示的沿ž轴的变形,透视属性对于查看变形的效果来说必不可少。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3d</title>
6 <style>
7 .out{
8 width: 500px;
9 height: 500px;
10 border: 1px solid #000;
11 background-color: pink;
12 margin:100px auto;
13 transform: rotateY(60deg);
14 /*可以让里面的盒子保持3d效果,加给父盒子*/
15 transform-style: preserve-3d;
16 }
17 .in{
18 width: 300px;
19 height: 400px;
20 margin: 50px auto;
21 background-color: green;
22 transform: rotateX(130deg);
23 }
24 </style>
25 </head>
26 <body>
27 <div class="out">
28 <div class="in"></div>
29 </div>
30 </body>
31 </html>
运行效果:
三,背面可见性属性
backface-visibility
决定属性元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其ÿ轴旋转约180度时会导致元素的背面面对观众。
backface-visibility
属性使用语法很简单:
backface-visibility: visible | hidden
该属性被设置为以下两个关键词之一:
- visible:为backface-visibility的默认值,表示反面可见
- hidden:表示反面不可见
案例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background-color: deepskyblue;
9 }
10 .box{
11 width: 300px;
12 height: 300px;
13 border:1px solid #000;
14 margin:100px auto;
15 position: relative;
16 }
17 .box::after,.box::before{
18 content:"";
19 position: absolute;
20 width: 100%;
21 height: 100%;
22 border-radius: 50%;
23 background-color: pink;
24 background: url("images/bg.png") no-repeat left top;
25 transition: 1s;
26 /*让盒子背面隐藏*/
27 backface-visibility: hidden;
28 }
29 .box::before{
30 transform: rotateY(-180deg);
31 }
32 .box::after{
33 background-position: right top;
34 }
35 .box:hover::before{
36 transform: rotateY(0deg);
37 }
38 .box:hover::after{
39 transform: rotateY(180deg);
40 }
41 </style>
42 </head>
43 <body>
44 <div class="box"></div>
45 </body>
46 </html>
运行效果: