正负旋转相消3D动画

直接上代码：

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);

}

}

这里要注意两点：其一，是开启3D转换的代码。其二：是外层两个祖先元素正负旋转相消的理解，注意理解rotateX,rotateY,rotateZ分别是以x,y,z三个轴为中心进行旋转。