css3怎么實現超立體3D圖片側翻傾斜效果

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

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

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

另外你也可以在這里查看DEMO演示，鼠標滑過圖片時會出現這樣的效果。

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

代碼如下:

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

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

然后是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的背景圖片，也就是我們要實現3d效果的那張圖片。同時還定義了圖片的描述信息樣式，這樣在圖片側翻后更加凸顯立體效果。

接下來就是鼠標滑過的動畫效果了：

代碼如下:

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來翻轉，translateZ來實現Z軸的3D轉換，思路都非常清晰。

感謝各位的閱讀，以上就是“css3怎么實現超立體3D圖片側翻傾斜效果”的內容了，經過本文的學習后，相信大家對css3怎么實現超立體3D圖片側翻傾斜效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！