css3实现3D旋转木马案例

 1 <!DOCTYPE html>
 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE">
 3     <style type="text/css">
 4         :root {
 5            
 6         }
 7         body{
 8             padding:0;
 9             margin:0;
10         }
11         .humenucontainer {
12             width: 800px;
13             height: 400px;
14             background-color: #000000;
15             perspective: 8000px; /*  这个是重点 **/
16         }
17         .humenucontainerCon {
18             background-color: transparent;
19             width: 100%;
20             height: 100%;
21             position: relative;
22             transform-style: preserve-3d; /*  这个是重点 3D 格式 呈现 **/
23             animation: rotaeMain 30s linear infinite;
24         }
25         .humenucontainerCon:hover{
26             animation-play-state:paused;
27         }
28         @keyframes rotaeMain {
29             0% {
30                 transform: rotateX(-10deg) rotateY(0deg); /* rotateX(-10deg) 是让有点倾斜的感觉，看着舒服  **/
31             }
32             100% {
33                 transform: rotateX(-10deg) rotateY(360deg);
34             }
35         }
36         .humenucontainerItem {
37             width: 200px;
38             height: 100px;
39             background-color: #ff6a00;
40             position: absolute;
41             top: 50%;
42             margin-top:-50px;
43             left: 50%;
44             margin-left: -100px;
45             border:1px solid #000000;
46             transform: rotateY(calc(var(--i) * 40deg )) translateZ(300px);
47         }
48     </style>
49     
50 </head>
51 
52 <body>
53     <div class="humenucontainer">
54         <div class="humenucontainerCon">
55             <div class="humenucontainerItem" style="--i:0;">1</div>
56             <div class="humenucontainerItem" style="--i:1;">2</div>
57             <div class="humenucontainerItem" style="--i:2;">3</div>
58             <div class="humenucontainerItem" style="--i:3;">4</div>
59             <div class="humenucontainerItem" style="--i:4;">5</div>
60             <div class="humenucontainerItem" style="--i:5;">6</div>
61             <div class="humenucontainerItem" style="--i:6;">7</div>
62             <div class="humenucontainerItem" style="--i:7;">8</div>
63             <div class="humenucontainerItem" style="--i:8;">9</div>
64         </div>
65     </div>
66 </body></html>

效果如下：

只是提供了一个思路，具体的细节可以继续优化。

posted on 2025-07-21 14:18 华安阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

huaan011

css3实现3D旋转木马案例

导航

公告