正負旋轉(zhuǎn)相消3D動畫
直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正負旋轉(zhuǎn)相消</title>
</head>
<style type="text/css">
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);
}
}
</style>
<body>
<div class="reverseRotate">
<div class="rotate">
<div class="content">正負旋轉(zhuǎn)相消3D動畫</div>
</div>
</div>
</body>
</html>
這里要注意兩點：其一，是開啟3D轉(zhuǎn)換的代碼。其二：是外層兩個祖先元素正負旋轉(zhuǎn)相消的理解，注意理解rotateX,rotateY,rotateZ分別是以x,y,z三個軸為中心進行旋轉(zhuǎn)。
