魔方相册效果展示具体实现过程可参考视频： https://www.bilibili.com/video/BV1tq4y

效果展示

具体实现过程可参考视频：

www.bilibili.com/video/BV1tq…

css实现

#container {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: Rotate 20s linear infinite;
    position: relative;
    backface-visibility: hidden;
    z-index: 1000;
}
@keyframes Rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
#container #largeBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
}
#container #smallBox {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
}
#container #largeBox img {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    object-fit: cover;
    opacity: 0.6;
    transition: 1s linear;
}
#container #largeBox img:hover {
    opacity: 1;
}
#container #smallBox img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    object-fit: cover;
    opacity: 0.8;
}

js实现

let container = document.getElementById('container');
let largeBox = document.getElementById('largeBox');
let smallBox = document.getElementById('smallBox');
for (let i = 1; i <= 6; i++) {
    let sImg = document.createElement('img')
    let lImg = document.createElement('img')
    sImg.setAttribute('src', `./img/${i}${i}${i}.jpg`)
    lImg.setAttribute('src', `./img/${i}${i}${i}.jpg`)
    smallBox.appendChild(sImg)
    largeBox.appendChild(lImg)
}
function change(size) {
    let smallImgs = smallBox.childNodes;
    let largeImgs = largeBox.childNodes;
    let pixel = [50, 150, 250]
    let degree = [0, 180, 90, -90, 90, -90]
    for (let i = 0; i < 6; i++) {
        if(i === 0) {
            smallImgs[i].style.transform = `translateZ(${pixel[0]}px)`
            largeImgs[i].style.transform = `translateZ(${pixel[size]}px)`
        }else if(i === 1 || i === 2 || i === 3) {
            smallImgs[i].style.transform = `rotateX(${degree[i]}deg) translateZ(${pixel[0]}px)`
            largeImgs[i].style.transform = `rotateX(${degree[i]}deg) translateZ(${pixel[size]}px)`
        } else if(i === 4 || i === 5){
            smallImgs[i].style.transform = `rotateY(${degree[i]}deg) translateZ(${pixel[0]}px)`
            largeImgs[i].style.transform = `rotateY(${degree[i]}deg) translateZ(${pixel[size]}px)`
        }
    }
}
change(1)
container.onmouseleave = function () {
    change(1)
    container.style.animationPlayState = 'running'
}
container.onmouseenter = function () {
    change(2)
    container.style.animationPlayState = 'paused'
}

function H5Audio(url, loop) {
    let audio = new Audio(url)
    audio.autoplay = true
    audio.loop = loop
}
window.onload = function () {
    H5Audio('./music/music.mp3', true)
}

html实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔方相册</title>
    <link rel="stylesheet" href="css/base.css"/>
</head>
<body>
    <div id="container">
        <div id="smallBox"></div>
        <div id="largeBox"></div>
    </div>
    <script src="js/base.js"></script>
</body>
</html>