本帖最后由 没有星星的夜空 于 2020-7-23 18:16 编辑
最近在某音看到这个旋转的立方体相册，感觉很新鲜，就研究了一下，不用JS，纯html+css
之前因为测试连接中带有首页链接，被当推广贴删了，现在重新发布。感谢吾友支持
先看效果链接：http://xiangce.youlinxi.top
请用谷歌浏览器或者其他浏览器的急速内核，IE不支持的
没钱升级服务器，1M带宽，将就着看看吧，不影响功能的，也就多加载一会
首先，国标惯例
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>佑霖兮之家</title>
<link rel="stylesheet" href="css/xiangce.css" />
</head>
最后一行调用css
然后开始写页面内容
第一步，先做一个大锅
[HTML] 纯文本查看 复制代码 <div class="wrap"></div>
第二步，开始往大锅里放东西，立方体有6个面，所以需要6个图
[HTML] 纯文本查看 复制代码 <div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/1.jpg" class="pic" >
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/2.jpg" class="pic">
</div>
<!--左图片 -->
<div class="out_left">
<img src="img/3.jpg" class="pic">
</div>
<div class="out_right">
<img src="img/4.jpg" class="pic">
</div>
<div class="out_top">
<img src="img/5.jpg" class="pic">
</div>
<div class="out_bottom">
<img src="img/6.jpg" class="pic">
</div>
题目既然是嵌套，那有大也要有小，下面就开始做小的，依然6张图
[HTML] 纯文本查看 复制代码 <span class="in_front">
<img src="img/7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/12.jpg" class="in_pic" />
</span>
到这里，页面显示已经做完了，可能有吾友会说，咦，这不行呀。
我说，不行是肯定的，做锅 的时候，忘记把锅放进世界了.
[HTML] 纯文本查看 复制代码 <body></body>
锅放进去，是不是就行了呢。答案是肯定的，肯定不行啊，都说了是HTML+CSS了，这还没见css呢
接下来放CSS，国际惯例，先加背景
[CSS] 纯文本查看 复制代码 html{
background:black;
height: 100%;
}
背景加完之后，那么就要和页面对应了，弄个大锅，这里就要把锅是什么样的给弄好，具体要多大的锅，锅怎么跑，怎么转什么的
[CSS] 纯文本查看 复制代码 .wrap{
width: 10px;
height: 10px;
/*改变左右上下,图片方块移动*/
margin: 200px 400px;
position: relative;
}
/*包裹所有容器样式*/
.cube{
width:600px;
height:400px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*匀速*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.8;
transition: all .4s;
锅设置好了，然后设置外侧的照片
[CSS] 纯文本查看 复制代码 .pic{
width: 300px;
height: 300px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(150px);
}
.cube .out_back{
transform: translateZ(-150px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(150px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(150px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(150px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(150px);
}
外侧大方框弄完，弄里面的小方框
[CSS] 纯文本查看 复制代码 .cube span{
display: bloack;
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 200px;
height: 200px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
呼~~~终于写完了
咦不对，这大框包着小框，看不见小框的东西啊，怎么办？弄个变形吧
[CSS] 纯文本查看 复制代码 .cube:hover .out_front{
transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back{
transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(400px);
}
最外面的大圈，按照规律自行添加即可
到此结束。感谢各位观众朋友的细心品尝。
至于你还要问，纳尼，照片呢？怎么没有说照片
哎，对于比我还小白的，我很能体会你的心情，我当初也是这样的，那就看下图
img 文件夹放图片，12张，编号为1、2....11.12
这下行了，你还有别的要问么？
源码公布了，就不放免费链接了，成品链接在附件。
最后，辛苦大家走一波热心~~~~
另外，附上赠送的资源
年会资料：https://www.52pojie.cn/thread-1064937-1-1.html
| 
[复制链接]
发表于 2020-7-23 17:08
|
发表于 2020-7-23 18:17
发表于 2020-7-23 17:22
