CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:18:371374浏览
刚发现一个网站上面的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>
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>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn