正負(fù)旋轉(zhuǎn)相消3D動(dòng)畫(huà)

直接上代碼：

正負(fù)旋轉(zhuǎn)相消

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

}

}

正負(fù)旋轉(zhuǎn)相消3D動(dòng)畫(huà)

這里要注意兩點(diǎn)：其一，是開(kāi)啟3D轉(zhuǎn)換的代碼。其二：是外層兩個(gè)祖先元素正負(fù)旋轉(zhuǎn)相消的理解，注意理解rotateX,rotateY,rotateZ分別是以x,y,z三個(gè)軸為中心進(jìn)行旋轉(zhuǎn)。

總結(jié)

以上是生活随笔為你收集整理的css黑科技有限公司,css动画之黑科技的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。