正負旋轉相消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動畫

這里要注意兩點：其一，是開啟3D轉換的代碼。其二：是外層兩個祖先元素正負旋轉相消的理解，注意理解rotateX,rotateY,rotateZ分別是以x,y,z三個軸為中心進行旋轉。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。