CSS3特效——六面体

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:3683

css3特效
{}
1 <!DOCTYPE html>\r\n 2 <html>\r\n 3 \r\n 4 <head>\r\n 5 <meta charset=\UTF-8\>\r\n 6 <title></title>\r\n 7 <style type=\text/css\>\r\n 8 ...
 1 <!DOCTYPE html>
 2 <html>
 3 
 4    <head>
 5       <meta charset="UTF-8">
 6       <title></title>
 7       <style type="text/css">
 8          #div{
 9             width: 900px;
10             height: 900px;
11             border: 0px solid green;
12          }
13          #box {
14             width: 1000px;
15             height: 1000px;
16             border: 0px solid green;
17             transform-style: preserve-3d;
18             position: absolute;
19             animation: spinCube 15s linear infinite alternate;
20          }
21          
22          
23          #box div {
24             width: 200px;
25             height: 200px;
26             position: absolute;
27             top: 600px;
28             left: 600px;
29             opacity: 0.7;
30             color: white;
31             text-align: center;
32             font-size: 150px;
33             font-weight: 600;
34          }
35          
36          @keyframes spinCube {
37             0% {
38                transform: rotateX( 0deg) rotateY( 0deg);
39             }
40             100% {
41                transform:  rotateX( 90deg) rotateY( 360deg);
42             }
43          }
44          /*参考面 正面*/
45          
46          .d1 {
47             background: red;
48          }
49          /*底部*/
50          
51          .d2 {
52             transform: rotateX(90deg);
53             background: yellow;
54             transform-origin: bottom;
55          }
56          /*顶部*/
57          
58          .d3 {
59             transform: rotateX(90deg) translateY(-200px);
60             background: green;
61             transform-origin: top;
62          }
63          /*左边*/
64          
65          .d4 {
66             transform: rotateY(90deg);
67             background: blue;
68             transform-origin: left;
69          }
70          /*右边*/
71          
72          .d5 {
73             transform: rotateY(-90deg);
74             background: black;
75             transform-origin: right;
76          }
77          /*背面*/
78          
79          .d6 {
80             transform: translateZ(-200px);
81             background: gray;
82          }
83       </style>
84    </head>
85 
86    <body>
87       <div id="div">
88          <div id="box">
89             <div class="d1">1</div>
90             <div class="d2">2</div>
91             <div class="d3">3</div>
92             <div class="d4">4</div>
93             <div class="d5">5</div>
94             <div class="d6">6</div>
95          </div>
96       </div>
97    </body>
98 
99 </html>

转载于:https://www.cnblogs.com/web-wjg/p/7136837.html

原文地址：https://blog.csdn.net/weixin_30421525/article/details/95119489?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-3-95119489-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/e30397b0895b4598854ca608e2a1eb93

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复