用CSS3的transform来做一个立方体-优快云博客

本文分享了作者通过CSS3的transform属性实现3D立方体效果的过程，包括代码实现、遇到的问题及解决方法。特别讨论了在不同浏览器中效果的差异、添加“盖子”的技巧以及通过JS控制旋转效果的技术挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢chrome帮我记住了账号密码，下面这个效果之前自己已经实现了，分享个演示地址：https://codepen.io/nooby/pen/vKogZB

　　有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页，当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果，可能正是由于这个效果，让我想到了--可以不可以通过transform来弄个3D的立方体呢？后来慢慢的去做，遇到好多问题，下面把这次小尝试记录下，等到日后有灵感再去弄。。。

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #main{
 8             width: 500px;
 9             height: 500px;
10             margin:150px auto;
11             position: absolute;
12             transform-style: preserve-3d;
13             left:40%;
14             perspective: 1500px;
15         }
16         img{
17             width:240px;
18             height:150px;
19             position: absolute;
20         }
21         img:nth-child(1){
22             transform:rotateY(30deg) translateZ(120px);
23             -webkit-transform: rotateY(30deg) translateZ(120px);
24             -moz-transform: rotateY(30deg) translateZ(120px);
25         }
26         img:nth-child(2){
27             transform:rotateY(120deg) translateZ(120px);
28             -webkit-transform: rotateY(120deg) translateZ(120px);
29             -moz-transform: rotateY(120deg) translateZ(120px);
30         }
31         img:nth-child(3){
32             transform:rotateY(210deg) translateZ(120px);
33             -webkit-transform: rotateY(210deg) translateZ(120px);
34             -moz-transform: rotateY(210deg) translateZ(120px);
35         }
36         img:nth-child(4){
37             transform:rotateY(300deg) translateZ(120px);
38             -webkit-transform: rotateY(300deg) translateZ(120px);
39             -moz-transform: rotateY(300deg) translateZ(120px);
40         }
41     </style>
42     <script>
43        // var r=120 / Math.tan(45/ 180 * Math.PI);//计算translate的值
44        /*window.onload=function f(){
45             var oImg=document.getElementsByTagName("img");
46             for(var i=0;i<oImg.length;i++){
47                 oImg[i].style.transform=rotateY(0,30+i*90+'deg');
48             }
49         }*/
50     </script>
51 </head>
52 <body>
53 <div id="main">
54     <img src="Images/a.jpg">
55     <img src="Images/f.jpg">
56     <img src="Images/c.jpg">
57     <img src="Images/d.jpg">
58 </div>
59 </body>
60 </html>