正方体CSS样式

简陋的正方体................

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>正方体</title>
 6         <style>
 7         *{margin: 0;padding: 0;}
 8         body{
 9             background: #666666;
10             transform-style: preserve-3d;   /*3D环境*/
11             perspective: 1200px;            /*景深*/
12         }
13         .box{
14             width: 400px;
15             height: 400px;
16             margin: 300px;
17             position: relative;
18             background-color: rgba(0,0,200,0.5);
19             transform-style: preserve-3d;
20             transform: rotate3d(1,1,0,51deg); /*3D旋转 看起来更形象*/
21         }
22         .box div{
23             width: 200px;
24             height: 200px;
25             position: absolute;                /*定位改变基础位置*/
26             left: 150px;
27             top: 150px;
28             text-align: center;
29             line-height: 200px;
30             font-size: 50px;
31             color: white;
32         }
33         .box1{
34             background-color: rgba(200,0,0,0.5);
35             transform: translatey(100px) rotateX(90deg); 
36             /*旋转调整出立体效果*/
37         }
38         .box2{
39             background-color: rgba(0,220,0,0.5);
40             transform: translatey(-100px) rotateX(90deg);
41         }
42         .box3{
43             background-color: rgba(200,220,0,0.5);
44             transform: translatex(-100px) rotatey(-90deg);
45         }
46         .box4{
47             background-color: rgba(200,0,220,0.5);
48             transform: translatex(100px) rotatey(90deg);
49         }
50         .box5{
51             background-color: rgba(30,0,110,0.5);
52             transform: translatez(100px);
53         }
54         .box6{
55             background-color: rgba(0,220,00,0.5);
56             transform: translatez(-100px) rotateY(180deg);
57         }
58         </style>
59     </head>
60     <body>
61         <!-- 我是一个正方体 -->
62         <div class="box">
63             <div class="box1">001</div>
64             <div class="box2">002</div>
65             <div class="box3">003</div>
66             <div class="box4">004</div>
67             <div class="box5">005</div>
68             <div class="box6">006</div>
69         </div> 
70     </body>
71 </html>

 

posted @ 2022-03-13 14:41  AVEGER  阅读(76)  评论(0)    收藏  举报