闭合立方体动画演示

马黑黑

前

左

后

右

底

顶

马黑黑

代码：

1. <style>
   
2. 
   
3. body { perspective: 3000px; }
   
4. 
   
5. .cube {
   
6.         --x: 120px;
   
7.         --xx: -60px;
   
8.         margin: 100px auto;
   
9.         width: var(--x);
   
10.         height: var(--x);
    
11.         transform-style: preserve-3d;
    
12.         transform-origin: 50% 50% 0;
    
13.         animation: rot 10s linear infinite;
    
14. }
    
15. 
    
16. .cube div {
    
17.         position: absolute;
    
18.         left: 0; top: 0; width: inherit; height: inherit;
    
19.         font: 2em / var(--x) Arial;
    
20.         color: white;
    
21.         text-align: center;
    
22.         text-shadow: 1px 1px 2px #000;
    
23.         opacity: .85;
    
24. }
    
25. 
    
26. .cube div:nth-child(1) { background: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
    
27. .cube div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
    
28. .cube div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
    
29. .cube div:nth-child(4) { background: magenta; transform:  rotateY(270deg) translateZ(calc(var(--x) / 2)); }
    
30. .cube div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
    
31. .cube div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }
    
32. 
    
33. @keyframes rot {
    
34.         to { transform: rotateX(-720deg) rotateY(360deg); }
    
35. }
    
36. 
    
37. </style>
    
38. 
    
39. <div class="cube">
    
40.         <div>前</div>
    
41.         <div>左</div>
    
42.         <div>后</div>
    
43.         <div>右</div>
    
44.         <div>底</div>
    
45.         <div>顶</div>
    
46. </div>
    

复制代码

红影

这个和那个镇宫之宝有点像，这个是6面颜色各不相同

梦油

黑黑朋友晚上好！俺看不出什么门道，但却深深地赞叹你的高潮技艺。

马黑黑

红影 发表于 2022-4-10 21:08
这个和那个镇宫之宝有点像，这个是6面颜色各不相同

立方体都一样，只是换一个写法，让它的实现简单一点

马黑黑

梦油 发表于 2022-4-10 21:10
黑黑朋友晚上好！俺看不出什么门道，但却深深地赞叹你的高潮技艺。

谢谢夸奖

加林森

现在再来学习

马黑黑

加林森 发表于 2022-4-10 22:02
现在再来学习

队长早

加林森

马黑黑 发表于 2022-4-11 07:32
队长早

老黑上午好。

红影

马黑黑 发表于 2022-4-10 21:15
立方体都一样，只是换一个写法，让它的实现简单一点

嗯嗯，多点写法更好，正好多跟着学学

梦油

马黑黑 发表于 2022-4-10 21:15
谢谢夸奖

黑黑朋友早晨好！你真是难得的人才啊！

马黑黑

梦油 发表于 2022-4-11 10:28
黑黑朋友早晨好！你真是难得的人才啊！

马黑黑

红影 发表于 2022-4-11 10:18
嗯嗯，多点写法更好，正好多跟着学学

思路不止一种的

马黑黑

加林森 发表于 2022-4-11 10:16
老黑上午好。

中午好

加林森

马黑黑 发表于 2022-4-11 12:01
中午好

中午好。

梦油

马黑黑 发表于 2022-4-11 12:00

黑黑朋友下午好！俺希望尽可能多地欣赏到你的作品。

马黑黑

梦油 发表于 2022-4-11 13:53
黑黑朋友下午好！俺希望尽可能多地欣赏到你的作品。

放心，主要时间许可

梦油

马黑黑 发表于 2022-4-11 14:15
放心，主要时间许可

太好了，黑黑朋友。

马黑黑

梦油 发表于 2022-4-11 15:01
太好了，黑黑朋友。

一切正常

红影

马黑黑 发表于 2022-4-11 12:01
思路不止一种的

更习惯于这个，没有JS的感觉好理解