<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css-3d旋转</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<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>
<!--小正方体 -->
<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>
</div>
</div>
</body>
</html>
3D360度可旋转立方体相册前端可用于表白，立方体图片可分层展开双击html文件打开自动播放，可以使用vscode自行修改代码
需积分: 5 175 浏览量
2024-01-24
10:30:46
上传
评论
收藏 576KB ZIP 举报
3d立体相册.zip （14个子文件） 
3d立体相册 img 
2.jpg 55KB 10.jpg 52KB 6.jpg 68KB 1.jpg 45KB 12.jpg 46KB 5.jpg 49KB 8.jpg 41KB 11.jpg 37KB 3.jpg 38KB 7.jpg 49KB 9.jpg 39KB 4.jpg 56KB css 
index.css 2KB
index.html 1KB资源评论
