8.立方体旋转图---动图

HTML:

 1 <!DOCTYPE html>
 2 <head>
 3 <meta charset="utf-8"/>
 4 <title>demo03</title>
 5 <link type="text/css" href="E:\htmltest1\demo1\demo03.css" rel="stylesheet"
 6 </head>
 7 <body>
 8     <div class="zfx">
 9         <ul>
10             <li>1</li>
11             <li>2</li>
12             <li>3</li>
13             <li>4</li>
14             <li>5</li>
15             <li>6</li>
16         </ul>
17     </div>
18 </body>
View Code

 

CSS:

 1 *{margin:0;padding:0;}
 2 @keyframes move{
 3     from{transform:rotateY(0deg);}
 4     to{transform:rotateY(360deg);}
 5 }
 6 .zfx{
 7     width:400px;
 8     height:400px;
 9     border:4px solid red;
10     margin:100px auto;
11 }
12 .zfx ul {
13     width:300px;
14     height:300px;
15     border:1px solid black;
16     margin:50px;
17     position:relative;
18     transform-style:preserve-3d;
19     perspective:1200px;
20     animation:move 10s infinite linear;
21     transform-origin:center center 150px;
22     clear:both;
23 }
24 .zfx ul li{
25     width:300px;
26     height:300px;    
27     text-align:center;
28     line-height:300px;
29     font-size:50px;
30     list-style:none;
31     color:#fff;
32     position:absolute;
33 }
34 .zfx ul li:nth-of-type(1){background:red; opacity:0.4;transform:translateX(300px) rotateY(-90deg);transform-origin:left;}
35 .zfx ul li:nth-of-type(2){background:aqua; opacity:0.4;transform:translateX(-300px) rotateY(90deg);transform-origin:right;}
36 .zfx ul li:nth-of-type(3){background:green; opacity:0.4;transform:translateY(300px) rotateX(90deg);transform-origin:top;}
37 .zfx ul li:nth-of-type(4){background:blue; opacity:0.4;transform:translateY(-300px) rotateX(-90deg);transform-origin:bottom;}
38 .zfx ul li:nth-of-type(5){background:maroon; opacity:0.4;transform:translateZ(300px);}
39 .zfx ul li:nth-of-type(6){background:yellow; opacity:0.4}
View Code

 

效果：

 

posted @ 2023-11-09 14:25  种太阳  阅读(16)  评论(0)  编辑  收藏  举报