【教程】3d立方体相册-莎拉·达·奥丁

4月

本次用莎拉·达·奥丁（サラ・ダ・オディン）

分享的代码如下
index.html

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;
}

声明：本文由千鹤喵绫（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢