CSS3 transform 2D转换的属性与方法：
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 850px; 11 height: 220px; 12 border: 1px solid; 13 margin: 200px auto; 14 } 15 16 .box>div { 17 float: left; 18 200px; 19 height: 200px; 20 margin-top: 10px; 21 margin-left: 10px; 22 background-color: #0f0; 23 text-align: center; 24 line-height: 200PX; 25 } 26 27 .box>div:nth-child(1):hover { 28 /* transform: rotate(45deg); */ 29 /* transform: rotateX(45deg); */ 30 transform: rotateY(45deg); 31 background-color: red; 32 } 33 34 .box>div:nth-child(2):hover { 35 /* transform: translate(100px); */ 36 /* transform: translateX(-100px); */ 37 transform: translateY(100px); 38 background-color: red; 39 } 40 41 .box>div:nth-child(3):hover { 42 /* transform: scale(1.4); */ 43 /* transform: scaleX(0.5); */ 44 transform: scaleY(1.2); 45 background-color: red; 46 } 47 48 .box>div:nth-child(4):hover { 49 /* transform: skew(45deg); */ 50 /* transform: skewX(45deg); */ 51 transform: skewY(45deg); 52 background-color: red; 53 } 54 </style> 55 </head> 56 57 <body> 58 <div class="box"> 59 <div class="top">旋转</div> 60 <div class="center">平移</div> 61 <div class="nav">缩放</div> 62 <div class="bottom">扭曲</div> 63 </div> 64 </body> 65 66 </html>
3d
转换属性
下表列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
以上表可以看出三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似，只是多了以下内容
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
backface-visibility
backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility属性使用语法：
backface-visibility: visible | hidden
该属性被设置为以下两个关键词之一：
visible：为backface-visibility的默认值，表示反面可见
hidden：表示反面不可见
一个元素的可见性与“backface-visibility:hidden”决定如下：
元素在3D环境下渲染上下文，将根据3D变形矩阵来计算，反之元素不在3D环境下渲染上下文，将根据2D变形矩阵来计算。
如果组件的矩阵在第3行、3列是负值，那么元素反面是隐藏，反之是可见的。
简单点来说，backface-visibility属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，旋转的内容仍然可见。但当backface-visibility设置为hidden时，旋转后内容将隐藏，因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象，例如下例中使用的纸牌。通过将backface-visibility设置为hidden，您可以轻松确保只有正面可见。
1 <DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style type="text/css"> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 13 #wrap { 14 position: absolute; 15 left: 50%; 16 top: 50%; 17 400px; 18 height: 400px; 19 margin-left: -200px; 20 margin-top: -200px; 21 border: 1px solid; 22 perspective: 200px; 23 background: url(3.jpg) no-repeat; 24 background-size: 100% 100%; 25 } 26 27 #wrap>.box { 28 100px; 29 height: 100px; 30 position: absolute; 31 left: 0; 32 top: 0; 33 right: 0; 34 bottom: 0; 35 margin: auto; 36 transform-style: preserve-3d; 37 transition: 3s; 38 transform-origin: center center 50%; 39 } 40 41 #wrap>.box>div { 42 position: absolute; 43 100px; 44 height: 100px; 45 background: rgba(123, 321, 333, .3); 46 text-align: center; 47 font: 50px/100px "微软雅黑"; 48 backface-visibility: hidden; 49 } 50 51 #wrap>.box>div:nth-child(5) { 52 top: -100px; 53 transform-origin: bottom; 54 transform: rotateX(90deg); 55 } 56 57 #wrap>.box>div:nth-child(6) { 58 bottom: -100px; 59 transform-origin: top; 60 transform: rotateX(-90deg); 61 } 62 63 #wrap>.box>div:nth-child(3) { 64 left: -100px; 65 transform-origin: right; 66 transform: rotateY(-90deg); 67 } 68 69 #wrap>.box>div:nth-child(4) { 70 right: -100px; 71 transform-origin: left; 72 transform: rotateY(90deg); 73 } 74 75 #wrap>.box>div:nth-child(2) { 76 transform: translateZ(-100px) rotateX(180deg); 77 } 78 79 #wrap>.box>div:nth-child(1) { 80 z-index: 1; 81 } 82 83 #wrap:hover .box { 84 transform: rotate3d(1, 1, 1, 180deg); 85 } 86 </style> 87 </head> 88 89 <body> 90 <div id="wrap"> 91 92 <div class="box"> 93 <div>前</div> 94 <div>后</div> 95 <div>左</div> 96 <div>右</div> 97 <div>上</div> 98 <div>下</div> 99 100 </div> 101 102 </div> 103 </body> 104 105 </html>