杜老師逆戰(zhàn)班學(xué)員 2020.02.22
我們通常瀏覽網(wǎng)頁(yè)，基本上看過(guò)去都是呈現(xiàn)著各種文字加圖片的2D效果信息，作為一名前端開發(fā)工程師非常重要的工作就是要讓用戶看到網(wǎng)頁(yè)時(shí)有眼前一亮、耳目一新的感覺，用戶除了能獲取到自己想要的信息，還能在心里說(shuō)一句：“哎呦，不錯(cuò)哦”，我們的價(jià)值就得到了升華！
今天要跟大家分享交流的是怎么用CSS動(dòng)畫特效實(shí)現(xiàn)圖片旋轉(zhuǎn)的效果，從三個(gè)準(zhǔn)備開始做起：
一、準(zhǔn)備好圖片素材
圖片大小盡量一致，如果大小有差別的話，可以通過(guò)固定統(tǒng)一的width和height，從而可以讓畫面整齊劃一。
二、準(zhǔn)備好思路
動(dòng)畫特效特別需要豐富的空間想象力，在三維立體空間中圖片沿著x、y、z如何旋轉(zhuǎn)需
要想清楚。

首先準(zhǔn)備6張圖片

添加樣式，通過(guò)浮動(dòng)和定位先讓圖片疊加在一起

#main .img-list img {
display: block;
position: absolute;
left: 0;
top: 0;
}
然后讓6張圖片等分360°，那么圖片需要繞著Y軸依次旋轉(zhuǎn)60°，如下圖所示：

#main .img-list img:nth-of-type(1) {
transform: rotateY(0deg);
}

#main .img-list img:nth-of-type(2) {transform: rotateY(60deg) ;}#main .img-list img:nth-of-type(3) {transform: rotateY(120deg);}#main .img-list img:nth-of-type(4) {transform: rotateY(180deg);}#main .img-list img:nth-of-type(5) {transform: rotateY(240deg);}#main .img-list img:nth-of-type(6) {transform: rotateY(300deg);}

此時(shí)的圖片還互相交織在一起，并沒有像想象中每個(gè)面都完全呈現(xiàn)出來(lái)，此時(shí)可以通過(guò)設(shè)置transform:translateY();屬性值，可以拉開圖片之間的間距，呈現(xiàn)出等邊6邊型。

要想觀看到3D效果，必須給#main加上景深perspective：600px；和觀看位置perspective-origin：top；開啟3D模式transform-style：preserve-3d;鼠標(biāo)移入#main區(qū)域時(shí)，就可以讓整個(gè)圖片繞著z軸開始旋轉(zhuǎn)
三、準(zhǔn)備好心情欣賞自己的杰作吧，水靈靈的爽妹子登場(chǎng)啦

詳細(xì)代碼如下：

Document

總結(jié)

以上是生活随笔為你收集整理的如何用CSS动画特效让图片旋转起来的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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