某音很火的立方体盒子，约妹必备

空白de记忆

最近在某音看到这个旋转的立方体相册，感觉很新鲜，就研究了一下，不用JS，纯html+css
之前因为测试连接中带有首页链接，被当推广贴删了，现在重新发布。感谢吾友支持

先看效果链接：http://xiangce.youlinxi.top
请用谷歌浏览器或者其他浏览器的急速内核，IE不支持的
没钱升级服务器，1M带宽，将就着看看吧，不影响功能的，也就多加载一会



首先，国标惯例

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4. <meta charset="utf-8" />
   
5. <title>佑霖兮之家</title>
   
6. 
   
7. <link rel="stylesheet" href="css/xiangce.css" />
   
8. </head>

复制代码

最后一行调用css
然后开始写页面内容
第一步，先做一个大锅

1. <div class="wrap"></div>

复制代码

第二步，开始往大锅里放东西，立方体有6个面，所以需要6个图

1. <div class="cube">
   
2.         <!--前面图片 -->
   
3.         <div class="out_front">
   
4.                 <img src="img/1.jpg"  class="pic" >
   
5.         </div>
   
6.         <!--后面图片 -->
   
7.         <div class="out_back">
   
8.                 <img src="img/2.jpg"  class="pic">
   
9.         </div>
   
10.         <!--左图片 -->
    
11.         <div class="out_left">
    
12.                 <img src="img/3.jpg"  class="pic">
    
13.         </div>
    
14.         <div class="out_right">
    
15.                 <img src="img/4.jpg"  class="pic">
    
16.         </div>
    
17.         <div class="out_top">
    
18.                 <img src="img/5.jpg"  class="pic">
    
19.         </div>
    
20.         <div class="out_bottom">
    
21.                 <img src="img/6.jpg"  class="pic">
    
22.         </div>

复制代码

题目既然是嵌套，那有大也要有小，下面就开始做小的，依然6张图

1. <span class="in_front">
   
2.                 <img src="img/7.jpg" class="in_pic" />
   
3.         </span>
   
4.         <span class="in_back">
   
5.                  <img src="img/8.jpg" class="in_pic" />
   
6.         </span>
   
7.         <span class="in_left">
   
8.                 <img src="img/9.jpg" class="in_pic" />
   
9.         </span>
   
10.         <span class="in_right">
    
11.                 <img src="img/10.jpg" class="in_pic" />
    
12.         </span>
    
13.         <span class="in_top">
    
14.                 <img src="img/11.jpg" class="in_pic" />
    
15.         </span>
    
16.         <span class="in_bottom">
    
17.                 <img src="img/12.jpg" class="in_pic" />
    
18.         </span>

复制代码

到这里，页面显示已经做完了，可能有吾友会说，咦，这不行呀。
我说，不行是肯定的，做锅 的时候，忘记把锅放进世界了.

1. <body></body>

复制代码

锅放进去，是不是就行了呢。答案是肯定的，肯定不行啊，都说了是HTML+CSS了，这还没见css呢

接下来放CSS，国际惯例，先加背景

1. html{
   
2.         background:black;
   
3.     height: 100%;        
   
4. }

复制代码

背景加完之后，那么就要和页面对应了，弄个大锅，这里就要把锅是什么样的给弄好，具体要多大的锅，锅怎么跑，怎么转什么的

1. .wrap{
   
2.         width: 10px;
   
3.         height: 10px;
   
4.         /*改变左右上下,图片方块移动*/
   
5.         margin: 200px 400px;
   
6.         position: relative;
   
7.          
   
8. }
   
9. /*包裹所有容器样式*/
   
10. .cube{
    
11.         width:600px;
    
12.         height:400px;
    
13.         margin: 0 auto;
    
14.         transform-style: preserve-3d;
    
15.         transform: rotateX(-30deg) rotateY(-80deg);
    
16.         -webkit-animation: rotate 20s infinite;
    
17.         /*匀速*/
    
18.         animation-timing-function: linear;
    
19. }
    
20. @-webkit-keyframes rotate{
    
21.         from{transform: rotateX(0deg) rotateY(0deg);}
    
22.         to{transform: rotateX(360deg) rotateY(360deg);}
    
23. }
    
24. .cube div{
    
25.         position: absolute;
    
26.         width: 300px;
    
27.         height: 300px;
    
28.         opacity: 0.8;
    
29.         transition: all .4s;

复制代码

锅设置好了，然后设置外侧的照片

1. .pic{
   
2.         width: 300px;
   
3.         height: 300px;
   
4. }
   
5. .cube .out_front{
   
6.         transform: rotateY(0deg) translateZ(150px);
   
7. }
   
8. .cube .out_back{
   
9.         transform: translateZ(-150px) rotateY(180deg);
   
10. }
    
11. .cube .out_left{
    
12.         transform: rotateY(90deg) translateZ(150px);
    
13. }
    
14. .cube .out_right{
    
15.         transform: rotateY(-90deg) translateZ(150px);
    
16. }
    
17. .cube .out_top{
    
18.         transform: rotateX(90deg) translateZ(150px);
    
19. }
    
20. .cube .out_bottom{
    
21.         transform: rotateX(-90deg) translateZ(150px);
    
22. }

复制代码

外侧大方框弄完，弄里面的小方框

1. .cube span{
   
2.         display: bloack;
   
3.         width: 200px;
   
4.         height: 200px;
   
5.         position: absolute;
   
6.         top: 50px;
   
7.         left: 50px;
   
8. }
   
9. .cube .in_pic{
   
10.         width: 200px;
    
11.         height: 200px;
    
12. }
    
13. .cube .in_front{
    
14.         transform: rotateY(0deg) translateZ(100px);
    
15. }
    
16. .cube .in_back{
    
17.         transform: translateZ(-100px) rotateY(180deg);
    
18. }
    
19. .cube .in_left{
    
20.         transform: rotateY(90deg) translateZ(100px);
    
21. }
    
22. .cube .in_right{
    
23.         transform: rotateY(-90deg) translateZ(100px);
    
24. }
    
25. .cube .in_top{
    
26.         transform: rotateX(90deg) translateZ(100px);
    
27. }
    
28. .cube .in_bottom{
    
29.         transform: rotateX(-90deg) translateZ(100px);
    
30. }

复制代码

呼~~~终于写完了

咦不对，这大框包着小框，看不见小框的东西啊，怎么办？弄个变形吧

1. .cube:hover .out_front{
   
2.         transform: rotateY(0deg) translateZ(400px);
   
3. }
   
4. .cube:hover .out_back{
   
5.         transform: translateZ(-400px) rotateY(180deg);
   
6. }
   
7. .cube:hover .out_left{
   
8.         transform: rotateY(90deg) translateZ(400px);
   
9. }
   
10. .cube:hover .out_right{
    
11.         transform: rotateY(-90deg) translateZ(400px);
    
12. }
    
13. .cube:hover .out_top{
    
14.         transform: rotateX(90deg) translateZ(400px);
    
15. }
    
16. .cube:hover .out_bottom{
    
17.         transform: rotateX(-90deg) translateZ(400px);
    
18. }

复制代码

最外面的大圈，按照规律自行添加即可


到此结束。感谢各位观众朋友的细心品尝。

至于你还要问，纳尼，照片呢？怎么没有说照片
哎，对于比我还小白的，我很能体会你的心情，我当初也是这样的，那就看下图


img 文件夹放图片，12张，编号为1、2....11.12
这下行了，你还有别的要问么？

源码公布了，就不放免费链接了，成品链接在附件。
最后，辛苦大家走一波热心~~~~

veewee

谢谢分享

faye828

谢谢大牛

981106614

谢谢大佬

瞄人缝

6666

meng521

感谢楼主分享

宿命

6666666666

ziyang

好的，非常感谢

dopod2566

这个是什么样的内容，都没有看明白，谢谢啦 。