使用 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 转换元素的透视视图。
-
transform-style: preserve-3d 定义子元素为3D元素。
正方体的制作
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>rotate</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 /* 最外层盒子 */ 15 .boxOuter { 16 width: 1000px; 17 margin: 100px; 18 perspective: 2000px; 19 } 20 21 /* 包裹正方体的盒子 */ 22 .box { 23 width: 200px; 24 height: 200px; 25 transform-style: preserve-3d; 26 transition: all 2s; 27 position: relative; 28 } 29 30 /* 正方体六个面的搭建 */ 31 .box>div { 32 width: 200px; 33 height: 200px; 34 line-height: 200px; 35 text-align: center; 36 position: absolute; 37 /* 添加透明度，方便观察 */ 38 opacity: 0.7; 39 } 40 41 .box1 { 42 background-color: tomato; 43 /* 最上面的板， */ 44 transform: translateZ(100px); 45 } 46 47 .box2 { 48 transform: rotateX(-90deg) translateZ(100px); 49 background-color: springgreen; 50 } 51 52 .box3 { 53 background-color: rgb(71, 44, 39); 54 transform: translateZ(-100px); 55 } 56 57 .box4 { 58 transform: rotateX(-90deg) translateZ(-100px); 59 background-color: rgb(58, 31, 94); 60 } 61 62 .box5 { 63 background-color: rgb(71, 44, 39); 64 transform: rotateY(-90deg) translateZ(100px); 65 } 66 67 .box6 { 68 transform: rotateY(-90deg) translateZ(-100px); 69 background-color: rgb(58, 31, 94); 70 } 71 72 /* 正方体鼠标移入事件 */ 73 .box:hover { 74 transform: rotateY(180deg) rotateX(180deg); 75 } 76 </style> 77 </head> 78 79 <body> 80 <div class="boxOuter"> 81 <div class="box"> 82 <div class="box1">111111</div> 83 <div class="box2">222222</div> 84 <div class="box3">333333</div> 85 <div class="box4">444444</div> 86 <div class="box5">555555</div> 87 <div class="box6">666666</div> 88 </div> 89 </div> 90 91 92 93 </body> 94 95 </html>
运行截图