纯css正方体旋转

css内容

<style>

    * {
        margin: 0;
        padding: 0;
    }
    
    ._a_ {
        width: 100%;
        height: 300px;
    }
    
    .box {
        width: 200px;
        height: 200px;
        margin: 0px auto;
        position: relative;
        transform-style: preserve-3d;
        animation: change 10s linear infinite alternate;
    }
    
    .box>div {
        width: 200px;
        height: 200px;
        /* background: darkturquoise; */
        position: absolute;
        transition: all 3s;
    }
    
    .box:hover>div {
        width: 300px;
        height: 300px;
    }
    /* .box:hover>.even {
        transform: translateZ(120px);
    }
    .box:hover>.odd {
        transform: translateZ(-120px);
    } */
    
    .box:hover>.tx1 {
        transform: rotateX(90deg) translateZ(170px);
    }
    
    .box:hover>.tx2 {
        transform: rotateX(90deg) translateZ(-170px);
    }
    
    .box:hover>.ty3 {
        transform: rotateY(90deg) translateZ(170px);
    }
    
    .box:hover>.ty4 {
        transform: rotateY(90deg) translateZ(-170px);
    }
    
    .box:hover>.tz5 {
        transform: rotateZ(90deg) translateZ(170px);
    }
    
    .box:hover>.tz6 {
        transform: rotateZ(90deg) translateZ(-170px);
    }
    
    .box>div:nth-child(1) {
        /* background: url("pic1.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, red, orange);
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .box>div:nth-child(2) {
        /* background: url("pic2.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, orange, yellow);
        transform: rotateX(90deg) translateZ(-100px);
    }
    
    .box>div:nth-child(3) {
        /* background: url("pic3.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, yellow, green);
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .box>div:nth-child(4) {
        /* background: url("pic4.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, green, blue);
        transform: rotateY(90deg) translateZ(-100px);
    }
    
    .box>div:nth-child(5) {
        /* background: url("pic5.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, blue, #065279);
        transform: translateZ(100px);
    }
    
    .box>div:nth-child(6) {
        /* background: url("pic6.jpg") no-repeat center;
        background-size: cover; */
        /*可更换成图片，现在变更为渐变色代替*/
        background: linear-gradient(45deg, #065279, purple);
        transform: translateZ(-100px);
    }
    
    @keyframes change {
        0% {
            transform: rotateX(45deg) rotateZ(30deg);
        }
        25% {
            transform: rotateX(111deg) rotateY(30deg);
        }
        60% {
            transform: rotateZ(135deg) rotateZ(70deg);
        }
        100% {
            transform: rotateY(205deg) rotateZ(200deg);
        }
    }
</style>

html内容

<!-- 空出一段高度 -->
<div class="\_a_"></div>
<!-- 正方体旋转 -->
<div class="box">
    <div class="even tx1"></div>
    <div class="odd tx2"></div>
    <div class="even ty3"></div>
    <div class="odd ty4"></div>
    <div class="even tz5"></div>
    <div class="odd tz6"></div>
</div>