<div class="reverseRotate">
    <div class="rotate">
        <div class="content">正负旋转相消3D动画</div>
    </div>
</div>

<!-- <div class="reverseRotate single">正负旋转相消3D动画</div> 
<div class="rotate single">正负旋转相消3D动画</div>  -->
body,
html {
    overflow: hidden;
}

div {
    transform-style: preserve-3d;
    perspective: 500px;
}

.reverseRotate {
    margin: 20vh auto;
}

.rotate,
.reverseRotate {
    width: 50vh;
    height: 50vh;
}

.content {
    width: 100%;
    height: 100%;
    line-height: 50vh;
    text-align: center;
    background-color: rgba(255, 100, 100, .8);
    font-size: 5vh;
    color: #fff;
    box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
}

.rotate {
    animation: rotate 5s linear infinite; 
}

.reverseRotate {
    animation: reverseRotate 5s linear infinite; 
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateZ(0deg);
    }
    50% {
        transform: rotateX(40deg) rotateZ(180deg);
    }
    100% {
        transform: rotateX(0deg) rotateZ(360deg);
    }
}

@keyframes reverseRotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}

// .single {
//     float:left;
//     line-height: 50vh;
//     text-align: center;
//     background-color: rgba(255, 100, 100, .8);
//     font-size: 5vh;
//     color: #fff;
//     margin: 20vh auto;
//     box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
// }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.