本次用莎拉·达·奥丁（サラ・ダ・オディン）
分享的代码如下
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d立方体相册-莎拉·达·奥丁</title>
<script src="https://www.xnijika.com/pic/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="waibu">
<div class="neibu">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
style.css
♾️ css 代码:
@keyframes xuanz {
0% {
transform:rotateY(0deg) rotatex(15deg);
}
100% {
transform:rotateY(360deg) rotatex(15deg);
}
}.waibu {
perspective:800px;
}
.neibu {
transform-style:preserve-3d;
position:relative;
width:200px;
height:200px;
margin:400px auto;
animation:xuanz 10s infinite linear;
}
.neibu div {
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
}
.neibu div:nth-child(1) {
transform:translatez(-100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(2) {
transform:rotateY(90deg) translatez(-100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(3) {
transform:rotateY(90deg) translatez(100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(4) {
transform:rotatex(-90deg) translatez(100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(5) {
transform:rotatex(-90deg) translatez(-100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(6) {
transform:translatez(100px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -10PX /cover;
}
.neibu div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) {
width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
opacity:0.3;
transition:transform 1s;
}
.neibu div:nth-child(7) {
transform:translatez(-150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(8) {
transform:rotateY(90deg) translatez(-150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(9) {
transform:rotateY(90deg) translatez(150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(10) {
transform:rotatex(-90deg) translatez(150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(11) {
transform:rotatex(-90deg) translatez(-150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
}
.neibu div:nth-child(12) {
transform:translatez(150px);
background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -10PX /cover;
}
body:hover div:nth-child(7) {
transform:translatez(-300px) scale(1.2);
opacity:0.8;
}
.waibu:hover div:nth-child(8) {
transform:rotateY(90deg) translatez(-300px) scale(1.2);
opacity:0.8;
}
.waibu:hover div:nth-child(9) {
transform:rotateY(90deg) translatez(300px) scale(1.2);
opacity:0.8;
}
.waibu:hover div:nth-child(10) {
transform:rotatex(-90deg) translatez(300px) scale(1.2);
opacity:0.8;
}
.waibu:hover div:nth-child(11) {
transform:rotatex(-90deg) translatez(-300px) scale(1.2);
opacity:0.8;
}
.waibu:hover div:nth-child(12) {
transform:translatez(300px) scale(1.2);
opacity:0.8;
}