css3-魔方

最新推荐文章于 2024-04-15 04:47:11 发布

「已注销」

最新推荐文章于 2024-04-15 04:47:11 发布

阅读量135

点赞数

分类专栏：前端文章标签： html5 css3

原文链接：https://www.mk2048.com/blog/blog.php?id=hib2ibiib&title=css3-%E9%AD%94%E6%96%B9

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>魔方</title>
 6     <style type="text/css">
 7         section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}
 8         .box {width:100px;height:100px;position:relative;
 9             transform-style:preserve-3d;
10             transition:4S;
11             transform-origin:center center -50px;
12         }
13         .box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}
14         .box div:nth-of-type(1){
15             background: #FF6600;;
16             transform:translateX(-100px) rotateY(-90deg);
17             transform-origin:right;
18         }
19         .box div:nth-of-type(2){
20             background:red ;
21             transform:translateY(-100px) rotateX(90deg);
22             transform-origin:bottom ;
23 
24                  }
25         .box div:nth-of-type(3){
26             background:darkviolet;
27             transform:translateX(100px) rotateY(90deg);
28             transform-origin:left;
29         }
30         .box div:nth-of-type(4){
31             background:yellow;
32             transform: translateY(100px) rotateX(-90deg) ;
33             transform-origin:top;
34         }
35         .box div:nth-of-type(5){
36             background:green;
37             transform:translateZ(-100px) rotateY(180deg);
38 
39         }
40         .box div:nth-of-type(6){
41             background:blue;
42         }
43         section:hover .box{
44             transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;
45 
46         }
47     </style>
48 </head>
49 <body>
50     <section>
51         <div class="box">
52             <div>1</div>
53             <div>2</div>
54             <div>3</div>
55             <div>4</div>
56             <div>5</div>
57             <div>6</div>
58         </div>
59     </section>
60 </body>
61 </html>