小編給大家分享一下怎么用css實現(xiàn)3d動畫特效，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站建設(shè)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

屬性

perspective：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上

perspective-origin:設(shè)置透視點的位置

transform-style:指定某元素的子元素是位于三維空間內(nèi)，取值：flat|preserve-3d

1.1.1思路

（1）有三個p，一起放到一個盒子里面。

（2）為其盒子設(shè)置樣式

.cube{

width:200px;

height:300px;

transform-style:preserve-3d;

margin:100pxauto;

position:relative;

transform:rotateX(30deg);

border-radius:50%;

padding:60px;

}

(3)為其每個p設(shè)置樣式

.mian{

width:200px;

height:300px;

background-image:url(1.jpg);

background-position:400px0;

position:absolute;

background:url(aka.jpg);

border:1pxsolid#ccc;

transition:2s;

}

/*.mian1:hover{

transform-origin:right;

transform:rotateY(-60deg);

}*/

.mian1{

transform-origin:right;

transform:translateX(-200px)rotateY(45deg);

background-position:00;

}

.mian2{

background-position:400px0;

}

.mian3{

transform-origin:left;

transform:translateX(200px)rotateY(45deg);

background-position:200px0;

}

（4）為其設(shè)置動畫

.mian3:hover{

transform:translateX(200px)rotateY(0deg);

}

.mian1:hover{

transform:translateX(-200px)rotateY(0deg);

}

1.1.1源碼：

1.1.2

2094583391-5b70f66722968_articlex.gif

1.1.2思路：

（1）有五個p，分別放上五個字。

前

端

小

學(xué)

生

（2）給box和p總體設(shè)置樣式

#box{

margin:100pxauto;

font-size:100px;

color:#005aa0;

text-align:center;

}

.ze1,.ze2,.ze3,.ze4,.ze5{

display:inline-block;

width:90px;

height:100%;

position:relative;

}

（3）設(shè)置偽元素before和after

.ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{

content:attr(data);

position:absolute;

color:#ffffff;

top:0;

left:2px;

transform-origin:left;

transition:transform.5s;

}

.ze1:before{

content:"前";

}

.ze2:before{

content:"端";

}

.ze3:before{

content:"小";

}

.ze4:before{

content:"學(xué)";

}

.ze5:before{

content:"生";

}

.ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after{

position:absolute;

color:#b3b3b3;

top:3px;

left:10px;

z-index:-1;

transform-origin:left;

transition:transform.5s;

}

.ze1:after{

content:"前";

}

.ze2:after{

content:"端";

}

.ze3:after{

content:"小";

}

.ze4:after{

content:"學(xué)";

}

.ze5:after{

content:"生";

}

（4）為其設(shè)置動畫

.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{

transform:rotateY(-40deg)skewY(10deg);

}

.ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{

transform:rotateY(40deg)skewY(10deg);

}

1.1.2源碼：

前

端

小

學(xué)

生

1.1.3思路不寫，只寫源碼

1.1.3源碼：

.ak.sj2{

width:10px;

height:10px;

margin-top:5px;

background:#fff;

border-radius:5px;

}

@keyframesmi{

0%{

transform:rotate(0deg)

}

100%{

transform:rotate(720deg)

}

}

@keyframesol{

0%{

transform:rotate(0deg)

}

100%{

transform:rotate(720deg)

}

}

.mian{

width:240px;

height:240px;

border:1pxsolid#ccc;

position:absolute;

border-radius:120px;

top:195px;

left:575px;

animation:af5sinfinitelinear;

}

.mian.ap{

width:10px;

height:10px;

border-radius:5px;

background:#f0f;

margin:30px0030px;

}

@keyframesaf{

0%{

transform:rotate(0deg)

}

100%{

transform:rotate(720deg)

}

}

.chen{

width:160px;

height:160px;

border:1pxsolid#ccc;

position:absolute;

border-radius:80px;

top:235px;

left:615px;

animation:oa4sinfinitelinear;

}

.ze{

width:10px;

height:10px;

border-radius:5px;

background:#0c0;

margin:20px0015px;

}

@keyframesoa{

0%{

transform:rotate(0deg)

}

100%{

transform:rotate(720deg)

}

}

.yu{

width:80px;

height:80px;

background-color:darkorange;

border-radius:40px;

position:absolute;

top:275px;

left:655px;

opacity:.7;

}

以上是“怎么用css實現(xiàn)3d動畫特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！