css3實(shí)現(xiàn)超立體3D圖片側(cè)翻傾斜效果

發(fā)布時(shí)間：2014-04-16 16:50:43 作者：佚名

這篇文章主要介紹了css3實(shí)現(xiàn)超立體3D圖片側(cè)翻傾斜效果,需要的朋友可以參考下

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

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

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

那么接下來(lái)我們分析一下源碼吧，顯示html代碼，非常簡(jiǎn)單：

復(fù)制代碼

代碼如下:

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

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

然后是CSS代碼：

復(fù)制代碼

代碼如下:

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

接下來(lái)就是鼠標(biāo)滑過(guò)的動(dòng)畫效果了：

復(fù)制代碼

代碼如下:

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來(lái)翻轉(zhuǎn)，translateZ來(lái)實(shí)現(xiàn)Z軸的3D轉(zhuǎn)換，思路都非常清晰。