純CSS3實現(xiàn)360度旋轉(zhuǎn)特效

開發(fā)工具與關(guān)鍵技術(shù)：DW /css3 作者：多事之秋 撰寫時間：2019年2月8日

因為某些原因，撰寫時間和發(fā)表時間不一致，請原諒；
用簡單代碼做一個360度旋轉(zhuǎn)特效

首先創(chuàng)建一個 html

<div class="contant"><div class="box"><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div><div><img src="img/55555.jpg" alt=""></div></div></div>

然后添加元素屬性，CSS代碼為：

@charset "utf-8"; /* CSS Document */ *{margin: 0;padding: 0; } body {perspective: 500px;perspective-origin: 50% 30%;background: #E3DFD3;overflow: hidden; } img{width: 100px;height: 100px; } .contant{width: 900px;height: 600px;margin: auto auto;position: relative;transform-style: preserve-3d;animation: mybt 8s infinite linear ; } @keyframes mybt{to{transform: rotateY(360deg);} } .box div {position: absolute;width: 100px;height: 111px;left: 47%;bottom: 50%;transform-origin: 50% 0;background-image: url( ../img/55555.jpg);background-repeat: no-repeat;transform-style: preserve-3d; } .box div:nth-child(1) {transform: rotateY(30deg) translateZ(-300px);background-position: 0px 0; } .box div:nth-child(2) {transform: rotateY(60deg) translateZ(-300px);background-position: -100px 0; } .box div:nth-child(3) {transform: rotateY(90deg) translateZ(-300px);background-position: -200px 0; } .box div:nth-child(4) {transform: rotateY(120deg) translateZ(-300px);background-position: -300px 0; } .box div:nth-child(5) {transform: rotateY(150deg) translateZ(-300px);background-position: -400px 0; } .box div:nth-child(6) {transform: rotateY(180deg) translateZ(-300px);background-position: -500px 0; } .box div:nth-child(7) {transform: rotateY(210deg) translateZ(-300px);background-position: -600px 0; } .box div:nth-child(8) {transform: rotateY(240deg) translateZ(-300px);background-position: -700px 0; } .box div:nth-child(9) {transform: rotateY(270deg) translateZ(-300px);background-position: -800px 0; } .box div:nth-child(10) {transform: rotateY(300deg) translateZ(-300px);background-position: -900px 0; } .box div:nth-child(11) {transform: rotateY(330deg) translateZ(-300px);background-position: -1000px 0; } .box div:nth-child(12) {transform: rotateY(360deg) translateZ(-300px);background-position: -1100px 0; }

總結(jié)

以上是生活随笔為你收集整理的纯CSS3实现360度旋转特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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