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)單:
<div onclick="">
<figure>
<figcaption>Autumn, by Lucien Agasse</figcaption>
</figure>
</div>
這里用了HTML5的 figure標(biāo)簽,表示插圖,沒(méi)什么特別。
然后是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的背景圖片,也就是我們要實(shí)現(xiàn)3d效果的那張圖片。同時(shí)還定義了圖片的描述信息樣式,這樣在圖片側(cè)翻后更加凸顯立體效果。
接下來(lái)就是鼠標(biāo)滑過(guò)的動(dòng)畫(huà)效果了:
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)換,思路都非常清晰。
相關(guān)文章
CSS3實(shí)現(xiàn)同時(shí)執(zhí)行傾斜和旋轉(zhuǎn)的動(dòng)畫(huà)效果
這篇文章通過(guò)實(shí)例代碼給大家主要介紹了,如何利用CSS3實(shí)現(xiàn)同時(shí)執(zhí)行傾斜和旋轉(zhuǎn)的動(dòng)畫(huà)效果,文中給出了完整的實(shí)例代碼,大家直接運(yùn)行就可以看到效果,有需要的朋友們可以參考2016-10-27純CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)文字傾斜線性變換動(dòng)畫(huà)特效源碼
這是一款基于純CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)文字傾斜線性變換動(dòng)畫(huà)特效源碼,當(dāng)鼠標(biāo)滑過(guò)文字時(shí),文字可呈現(xiàn)出傾斜及斜線滑過(guò)的效果,且動(dòng)畫(huà)過(guò)度效果流暢自然2016-06-07HTML5和CSS3炫酷圖片運(yùn)動(dòng)模糊和傾斜特效源碼
本特效源碼是一款效果非常炫酷的HTML5和CSS3圖片運(yùn)動(dòng)模糊和傾斜效果的代碼。圖片產(chǎn)生輕微的運(yùn)動(dòng)模糊并傾斜的效果2016-03-24jQuery+CSS3單頁(yè)傾斜分割布局幻燈片特效源碼
是一款非常有創(chuàng)意的基于jQuery和CSS3單頁(yè)傾斜分割布局幻燈片特效的代碼。該幻燈片特效將整個(gè)屏幕傾斜分割為兩個(gè)部分,在鼠標(biāo)向下滾動(dòng)時(shí),圖片部分和文本部分會(huì)相互切換2015-11-10HTML5+CSS3實(shí)現(xiàn)圖片可傾斜擺放的動(dòng)畫(huà)相冊(cè)效果源碼
今天我們又要來(lái)分享一個(gè)CSS3動(dòng)畫(huà)相冊(cè),這款相冊(cè)的特點(diǎn)是圖片可以任意角度的傾斜擺放2015-01-06基于CSS3實(shí)現(xiàn)的圖片可傾斜四個(gè)角度傾斜特效源碼
這是一款基于CSS3實(shí)現(xiàn)的圖片特效源碼,它可以讓網(wǎng)頁(yè)上的圖片傾斜任意的角度,其實(shí)在CSS3中實(shí)現(xiàn)圖片的傾斜非常簡(jiǎn)單,我們并不需要利用復(fù)雜的JS計(jì)算各種角度,只要用CSS3的tr2014-08-20css3 給頁(yè)面加個(gè)半圓形導(dǎo)航條主要利用旋轉(zhuǎn)和傾斜樣式
利用了css3的 rolate(旋轉(zhuǎn)) 和 skew (傾斜)樣式給頁(yè)面加個(gè)半圓形導(dǎo)航條,具體的實(shí)現(xiàn)示例如下,感興趣的朋友不要錯(cuò)過(guò)2014-02-10- 教大家一個(gè)方法使用CSS把整個(gè)網(wǎng)頁(yè)傾斜,代碼只有在支持CSS3.0的瀏覽器上有效果。目前只有IE9以上版本及firefox高版本支持,其它瀏覽器沒(méi)有測(cè)試2014-01-27
CSS3 傾斜的網(wǎng)頁(yè)圖片庫(kù)實(shí)例教程
如何使用CSS3來(lái)定位一個(gè)傾斜的圖片.2009-11-14- 純CSS3制作圖片傾斜45度封頁(yè)角特效源碼是一款常用的圖片或者產(chǎn)品列表右上角CSS3標(biāo)簽效果。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用,有需要的朋友可以直接下載使用2017-03-07