具体实现效果如下：

3d旋转效果

话不多说，直接开干；介绍一下css3关键技术：

perspective：定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-style：属性规定如何在 3D 空间中呈现被嵌套的元素，这里使用其preserve-3d属性

transform-origin：允许改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

html代码

<div class="content">
        <div class="wrapper" id="rotate">
            <div class="face"><img src="static/1.jpg" class="face-bg"></div>
            <div class="face"><img src="static/2.jpg" class="face-bg"></div>
            <div class="face"><img src="static/3.jpg" class="face-bg"></div>
            <div class="face"><img src="static/4.jpg" class="face-bg"></div>
            <div class="face"><img src="static/5.jpg" class="face-bg"></div>
            <div class="face"><img src="static/6.jpg" class="face-bg"></div>
        </div>
    </div>

css代码

*{
        margin: 0;
        padding: 0;
    }
    .content{
        width: 100%;
        height: 100vh;
        perspective:3000px;
        display: flex;
        animation: changeBg 20s linear infinite;
    }
    @keyframes changeBg {
        0%{
            background: url("static/1.jpg") no-repeat;
            background-size: cover;
        }
        20%{
            background: url("static/2.jpg") no-repeat;
            background-size: cover;
        }
        40%{
            background: url("static/3.jpg") no-repeat;
            background-size: cover;
        }
        60%{
            background: url("static/4.jpg") no-repeat;
            background-size: cover;
        }
        80%{
            background: url("static/5.jpg") no-repeat;
            background-size: cover;
        }
        100%{
            background: url("static/6.jpg") no-repeat;
            background-size: cover;
        }
    }
    .btn{
        width: 150px;
        height: 60px;
        right: 200px;
        top: 200px;
        font-size: 18px;
        font-weight: bold;
        background: rgba(255, 255, 255, .0);
        border: 4px solid #fff;
        cursor: pointer;
        color: #fff;
        position: absolute;
    }
    
    .btn:hover{
        background: rgba(255, 255, 255, .4);
    }
    
    .wrapper{
        width: 400px;
        height: 400px;
        margin: auto;
        transform-style: preserve-3d;
        position: relative;
        transform-origin: center;
        transform: rotateX(150deg) rotateY(50deg);
    }
    .face{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .8;
        cursor: pointer;
    }
    .face:hover{
        opacity: 1;
        transform: scaleX(1.5);
    }
    .face .face-bg {
        width: 100%;
        height: 100%;
    }
    .face:nth-child(1) {
        transform: translateZ(200px);
    }
    .face:nth-child(2) {
        transform: translateZ(-200px);
    }
    .face:nth-child(3) {
        transform-origin: right;
        transform: translateZ(200px) rotateY(-90deg);
    }
    .face:nth-child(4) {
        transform-origin: left;
        transform: translateZ(200px) rotateY(90deg);
    }
    .face:nth-child(5) {
        transform-origin: top;
        transform: translateZ(200px) rotateX(-90deg);
    }
    .face:nth-child(6) {
        transform-origin: bottom;
        transform: translateZ(200px) rotateX(90deg);
    }

js代码

 const element = document.getElementById("rotate");
    window.onmousedown = down => {
        let [startX, startY] = [down.x, down.y];
        window.onmousemove = move => {
            const [endX, endY] = [move.x, move.y];
            const [stepX, stepY] = [endX-startX, endY-startY];  
            element.style.transform = `rotateX(${stepY * 2}deg) rotateY(${stepX * 2}deg)`
        }
        window.onmouseup = e3 => {
            window.onmousemove = null;
            window.onmouseup = null;
        }
    }

OK，具体实现完成，立方体有6个面，所以文中所用到六张图片，图片自己去整理了；如果有好的建议分享一下，哈哈哈~~~~~~~~