3d旋转相册

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

页面布局：

     <!--/*外层最大容器*/-->
<div class="wrap">
    <!--	/*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <div class="out_right">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <div class="out_top">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <div class="out_bottom">
            <img src="./OIP-C.jpg" class="pic" />
        </div>
        <!--小正方体 -->
        <span class="in_front">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
        <span class="in_back">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
        <span class="in_left">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
        <span class="in_right">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
        <span class="in_top">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
        <span class="in_bottom">
            <img src="./OIP-C.jpg" class="in_pic" />
        </span>
    </div>
</div>

样式：

                  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

radial-gradient用于创建重复的径向渐变 "图像"

        background: radial-gradient(#ccc, rgb(5, 1, 36));
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 300px;
        height: 300px;
        position: relative;

让转换的子元素保留3D转换

        transform-style: preserve-3d;

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等 rotateX围绕其在一个给定度数X轴旋转的元素、 rotateY围绕其在一个给定度数Y轴旋转的元素 、

        transform: rotateX(330deg) rotateY(330deg);
        

animation-direction 属性定义是否循环交替反向播放动画 infinite 无限播放

        animation: rotate 5s linear alternate infinite;
    }

    .container:hover .fornt {
        transition: 2s;
        transform: translateZ(250px);
    }

    .container:hover .back {
        transition: 2s;
        transform: rotateY(180deg) translateZ(250px);
    }

    .container:hover .left {
        transition: 2s;
        transform: rotateY(-90deg) translateZ(250px);
    }

    .container:hover .right {
        transition: 2s;
        transform: rotateY(90deg) translateZ(250px);
    }

    .container:hover .top {
        transition: 2s;
        transform: rotateX(90deg) translateZ(250px);
    }

    .container:hover .bottom {
        transition: 2s;
        transform: rotateX(-90deg) translateZ(250px);
    }

    .item {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.7;
    }

    .items {
        position: absolute;
        width: 150px;
        height: 150px;
        opacity: 0.7;
    }

    .items img {
        width: 150px;
        height: 150px;
    }

margin-left: 75px; margin-top: 75px;，如果不设置这两个属性，里面的盒子上部和左部会贴着外边盒子，这样的话可以居中展示

    .in-fornt {
        margin-left: 75px;
        margin-top: 75px;
        /* translateZ，定义沿着 Z 轴的 3D 旋转 */
        transform: translateZ(75px);
    }

    .in-back {
        margin-left: 75px;
        margin-top: 75px;
        transform: rotateY(180deg) translateZ(75px);
    }

    .in-left {
        margin-left: 75px;
        margin-top: 75px;

        transform: rotateY(-90deg) translateZ(75px);
    }

    .in-right {

        margin-left: 75px;
        margin-top: 75px;
        transform: rotateY(90deg) translateZ(75px);
    }

    .in-top {
        margin-left: 75px;
        margin-top: 75px;
        transform: rotateX(90deg) translateZ(75px);
    }

    .in-bottom {
        margin-left: 75px;
        margin-top: 75px;
        transform: rotateX(-90deg) translateZ(75px);
    }

    .item img {
        width: 100%;
        height: 100%;
    }

transition: 2s有一个动画效果2S

    .fornt {
        transition: 2s;
        transform: translateZ(150px);
    }

    .back {
        transition: 2s;
        transform: rotateY(180deg) translateZ(150px);
    }

    .left {
        transition: 2s;
        transform: rotateY(-90deg) translateZ(150px);
    }

    .right {
        transition: 2s;
        transform: rotateY(90deg) translateZ(150px);
    }

    .top {
        transition: 2s;
        transform: rotateX(90deg) translateZ(150px);
    }

    .bottom {
        transition: 2s;
        transform: rotateX(-90deg) translateZ(150px);
    }

    @keyframes rotate {

        /* 0%,
        5% {
            transform: rotateY(90deg);
        } */

        20%,
        25% {
            transform: rotateY(270deg);
        }

        /* 40%,
        45% {
            transform: rotateY(270deg);
        }

        60%,
        65% {
            transform: rotateX(-90deg);
        }

        80%,
        85% {
            transform: rotateX(0deg);
        }

        95%,
        100% {
            transform: rotateX(90deg);
        } */
    } 
    

触摸盒子之前

触摸盒子之后