這篇文章主要講解了“css3怎么實現(xiàn)超立體3D圖片側(cè)翻傾斜效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3怎么實現(xiàn)超立體3D圖片側(cè)翻傾斜效果”吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、新邵網(wǎng)站維護(hù)、網(wǎng)站推廣。

上午的時候我在jQuery論壇上看到網(wǎng)友分享的一款CSS3 3D圖片側(cè)翻傾斜特效，覺得效果非常棒，其實話說回來，這玩意兒的實現(xiàn)真的非常簡單，主要是創(chuàng)意不錯。先來看看效果圖。

如何，看上去挺不錯吧，傾斜、陰影，讓一張很普通的圖片變得如此霸氣。

另外你也可以在這里查看DEMO演示，鼠標(biāo)滑過圖片時會出現(xiàn)這樣的效果。

那么接下來我們分析一下源碼吧，顯示html代碼，非常簡單：

代碼如下:

<div onclick="">
 <figure>
   <figcaption>Autumn, by Lucien Agasse</figcaption>
 </figure>
</div>

這里用了HTML5的 figure標(biāo)簽，表示插圖，沒什么特別。

然后是CSS代碼：

代碼如下:

figure {
 margin: 0;
 width: 100%;
 height: 29.5vw;
 background: url("winter-hat.jpg");
   background-size: 100%;
   transform-origin: center bottom;
   transform-style: preserve-3d;
   transition: 1s transform;
}
figure figcaption {
 width: 100%;
 background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
       url("winter-hat.jpg");
   background-size: 100%; height: 50px;
   background-repeat: no-repeat;
 background-position: bottom;
 color: #fff;
   position: relative; top: 29.5vw;
   transform-origin: center top;
   transform: rotateX(-89.9deg);
   font-size: 1.2vw;
 font-family: Montserrat, Arial, sans-serif;
 text-align: center;
   line-height: 3;
}
figure:before {
 content: '';
 position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
   box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
   transition: 1s;
   transform: rotateX(95deg) translateZ(-80px) scale(0.75);
   transform-origin: inherit;
}

這里我們定義了figure的背景圖片，也就是我們要實現(xiàn)3d效果的那張圖片。同時還定義了圖片的描述信息樣式，這樣在圖片側(cè)翻后更加凸顯立體效果。

接下來就是鼠標(biāo)滑過的動畫效果了：

代碼如下:

div:hover figure {
 transform: rotateX(75deg) translateZ(5vw);
}
div:hover figure:before {
   box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
   transform: rotateX(-5deg) translateZ(-80px) scale(1);
   }</p> <p>@media screen and (max-width: 800px) {
 div { width: 50%; }
 figure { height: 45vw; }
 figure figcaption {
   top: 45vw;
   font-size: 2vw;
 }
}</p> <p>@media screen and (max-width: 500px) {
 div {
   width: 80%;
   margin-top: 1rem;
 }
 figure {
   height: 70vw;
 }
 figure figcaption {
   top: 70vw;
   font-size: 3vw;
 }
}

很容易可以看出這里利用了css3的transform屬性，其中rotateX來翻轉(zhuǎn)，translateZ來實現(xiàn)Z軸的3D轉(zhuǎn)換，思路都非常清晰。

感謝各位的閱讀，以上就是“css3怎么實現(xiàn)超立體3D圖片側(cè)翻傾斜效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3怎么實現(xiàn)超立體3D圖片側(cè)翻傾斜效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

本文題目：css3怎么實現(xiàn)超立體3D圖片側(cè)翻傾斜效果
網(wǎng)頁網(wǎng)址：http://aaarwkj.com/article36/ihhssg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)