HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

    background: url(../img/s3.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateY(90deg) translateZ(200px);
}.box .box1 .left {background: url(../img/s4.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateY(-90deg) translateZ(200px);
}.box .box1 .top {background: url(../img/s5.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateX(90deg) translateZ(200px);
}.box .box1 .bottom {background: url(../img/s6.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateX(-90deg) translateZ(200px);
}/*����Ч��*/.box .box1:hover .font {background: url(../img/s1.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: translateZ(400px);
}.box .box1:hover .back {background: url(../img/s2.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: translateZ(-400px) rotateY(180deg);
}.box .box1:hover .right {background: url(../img/s3.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateY(90deg) translateZ(400px);
}.box .box1:hover .left {background: url(../img/s4.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateY(-90deg) translateZ(400px);
}.box .box1:hover .top {background: url(../img/s5.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateX(90deg) translateZ(400px);
}

HTML代码 :

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>英雄联盟</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head><body><audio class="audio-player" id="video1" autoplay muted loop><source src="881840.ogg" type="audio/mpeg"></audio><div class="box"><div class="box1"><div class="font"></div><div class="back"></div><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><i class="i-font"></i><i class="i-back"></i><i class="i-top"></i><i class="i-bottom"></i><i class="i-left"></i><i class="i-right"></i> </div></div><script>document.body.addEventListener('mousedown', function() {var video1 = document.getElementById("video1")video1.muted = false;video1.load();video1.play();}, false);</script></body></html>