css3 3D transform转换（正方体制作）

使用 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>

运行截图

 

posted @ 2020-08-22 07:08  帅气巴巴  阅读(504)  评论(0)  编辑  收藏  举报