CSS3实现嵌套立方体旋转的3D效果_html/css

CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:18:37

original

1376 Les gens l'ont consulté

刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html

这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。

先看一下布局结构：

<div class="container">        <div class="box">            <ul class="cube_1">                <li><img  src="../Img/1.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/2.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/3.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/4.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/5.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/6.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>            </ul>            <ul class="cube_2">                <li><img  src="../Img/7.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/8.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/9.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/1.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/2.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>                <li><img  src="../Img/3.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>            </ul>        </div>    </div>

Copier après la connexion

container放在页面的适当位置，box放在container的中间位置。cube_1是外面的小正方体，cube_2是外面的小正方体。设置 ul 和 li 的position为absolute，居中定位，然后让每张图片绕Y轴或X轴旋转相应的角度，然后向Z轴移动相应的距离。布局完成后添加相应的动画，和鼠标移入的变化。

注意点：perspective和transform-style这两个属性我分别用在了cube_1和cube_2上面，设置透明度显示出来之后外面的立方体对里面的立方体没有遮挡的效果，我想这应该是cube_1和cube_2分别使用上述两个属性导致隔离开来互不影响的结果，然后又给container添加了transform-style:preserve-3d;发现遮挡效果出现了。问题解决。

代码写的有点乱，也比较臃肿：

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>cube_3D</title>  6 </head>  7 <style type="text/css">  8     *{  9         margin: 0; 10         padding: 0; 11     } 12     .container{ 13         width: 800px; 14         height: 500px; 15         background-color: #ccc; 16         margin: 50px auto; 17         position: relative; 18     } 19     .container .box{ 20         margin: auto; 21         position: absolute; 22         width: 1px; 23         height: 1px; 24         top: 0; 25         left: 0; 26         bottom: 0; 27         right: 0; 28         background-color: red; 29         transform-style: preserve-3d; 30     } 31     @keyframes an1{ 32         0%{ 33             transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 34         } 35         25%{ 36             transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg); 37         } 38         50%{ 39             transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg); 40         } 41         75%{ 42             transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg); 43         } 44         100%{ 45             transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 46         } 47     } 48     .container .box .cube_1{ 49         list-style: none; 50         width: 200px; 51         height: 200px; 52         margin: -100px -100px; 53         position: absolute; 54         perspective: 4000px; 55         transform-style: preserve-3d; 56         animation: an1 10s linear 0s infinite; 57     } 58     .container .box .cube_1 li{ 59         position: absolute; 60         width: 200px; 61         height: 200px; 62         opacity: 0.5; 63         transition: transform .2s ease-in 0s; 64     } 65     .container .box .cube_1 li img{ 66         width: 200px; 67         height: 200px; 68     } 69     .container .box .cube_1 li:nth-child(1){ 70         transform: rotateY(0deg) translateZ(100px); 71         transition: all 1s ease-in 0; 72     } 73     .container .box .cube_1 li:nth-child(2){ 74         transform: rotateY(90deg) translateZ(100px); 75     } 76     .container .box .cube_1 li:nth-child(3){ 77         transform: rotateY(180deg) translateZ(100px); 78     } 79     .container .box .cube_1 li:nth-child(4){ 80         transform: rotateY(270deg) translateZ(100px); 81     } 82     .container .box .cube_1 li:nth-child(5){ 83         transform: rotateX(90deg) translateZ(100px); 84     } 85     .container .box .cube_1 li:nth-child(6){ 86         transform: rotateX(-90deg) translateZ(100px); 87     } 88      89     .container .box .cube_2{ 90         list-style: none; 91         width: 100px; 92         height: 100px; 93         position: absolute; 94         margin: -50px -50px; 95         perspective: 4000px; 96         transform-style: preserve-3d; 97         animation: an1 10s linear 0s infinite; 98     } 99     .container .box .cube_2 li{100         position: absolute;101         width: 100px;102         height: 100px;103     }104     .container .box .cube_2 li img{105         width: 100px;106         height: 100px;107     }108     .container .box .cube_2 li:nth-child(1){109         transform: rotateY(0deg) translateZ(50px);110     }111     .container .box .cube_2 li:nth-child(2){112         transform: rotateY(90deg) translateZ(50px);113     }114     .container .box .cube_2 li:nth-child(3){115         transform: rotateY(180deg) translateZ(50px);116     }117     .container .box .cube_2 li:nth-child(4){118         transform: rotateY(270deg) translateZ(50px);119     }120     .container .box .cube_2 li:nth-child(5){121         transform: rotateX(90deg) translateZ(50px);122     }123     .container .box .cube_2 li:nth-child(6){124         transform: rotateX(-90deg) translateZ(50px);125     }126 127     .container .box:hover .cube_1 li:nth-child(1){128         transform: rotateY(0deg) translateZ(200px);129     }130     .container .box:hover .cube_1 li:nth-child(2){131         transform: rotateY(90deg) translateZ(200px);132     }133     .container .box:hover .cube_1 li:nth-child(3){134         transform: rotateY(180deg) translateZ(200px);135     }136     .container .box:hover .cube_1 li:nth-child(4){137         transform: rotateY(270deg) translateZ(200px);138     }139     .container .box:hover .cube_1 li:nth-child(5){140         transform: rotateX(90deg) translateZ(200px);141     }142     .container .box:hover .cube_1 li:nth-child(6){143         transform: rotateX(-90deg) translateZ(200px);144     }145 </style>146 <body>147     <div class="container">148         <div class="box">149             <ul class="cube_1">150                 <li><img  src="../Img/1.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>151                 <li><img  src="../Img/2.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>152                 <li><img  src="../Img/3.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>153                 <li><img  src="../Img/4.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>154                 <li><img  src="../Img/5.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>155                 <li><img  src="../Img/6.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>156             </ul>157             <ul class="cube_2">158                 <li><img  src="../Img/7.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>159                 <li><img  src="../Img/8.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>160                 <li><img  src="../Img/9.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>161                 <li><img  src="../Img/1.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>162                 <li><img  src="../Img/2.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>163                 <li><img  src="../Img/3.jpg" alt="CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose" ></li>164             </ul>165         </div>166     </div>167 </body>168 </html>

Copier après la connexion