在前不久我們講解了CSS3 3D卡片翻轉(zhuǎn)技術(shù)，在這篇文章中，我們要跟進(jìn)一步，在卡片3D翻轉(zhuǎn)的基礎(chǔ)上，制作卡片的動態(tài)陰影效果。最終效果是鼠標(biāo)滑過圖片時，卡片會3D翻轉(zhuǎn)，圖片的背面顯示圖片的標(biāo)題，在圖片的頂部時圖片的陰影，陰影也會隨圖片一起3D翻轉(zhuǎn)。

HTML結(jié)構(gòu)

這個CSS3 3D卡片翻轉(zhuǎn)特效的HTML結(jié)構(gòu)很簡單。

Mouse

Irrigation rats

Rabbit

注意：每一個包裹

的將用于插件3D空間。

為了制作最終的3D翻轉(zhuǎn)效果，我們需要注意以下幾點：

每一個figcaption都要設(shè)置為和響應(yīng)式圖片一樣的大小。

圖片標(biāo)題反向放置，放置在圖片的背面。

創(chuàng)建一個和圖片一起運(yùn)動的dropshadow，不用添加額外的代碼。

CSS樣式

首先，我們需要在3D空間中操縱

元素，我們通過在其父元素上設(shè)置perspective來達(dá)到這個效果(注意代碼中沒有使用瀏覽器廠商的前綴)：

div.flip-3d {perspective: 1200px; width: 30%; float: left;}

接下來，將

元素中的圖片設(shè)置為響應(yīng)式的，為了使元素盡可能的有效，這里只跟蹤元素的transformation。同時不要忘記設(shè)置transform-style。

div.flip-3d figure {

position: relative;

transform-style: preserve-3d;

transition: 1s transform;

font-size: 1.6rem;

}

div.flip-3d figure img {

width: 100%; height: auto;

}

在demo中還通過@media來設(shè)置對小屏幕的支持，你可以在demo中縮放瀏覽器來看看效果。

圖片標(biāo)題的位置

圖片的標(biāo)題使用position: absolute放置在圖片上面(前面已經(jīng)將

元素設(shè)置為position: relative)，然后通過rotate和translate將圖片標(biāo)題放到圖片的背面去，達(dá)到這種效果的前提是元素設(shè)置了正確的transform-style。

div.flip-3d figure figcaption {

position: absolute;

width: 100%; height: 100%; top: 0;

transform: rotateY(.5turn) translateZ(1px);

background: rgba(255,255,255,0.9);

text-align: center;

padding-top: 45%;

opacity: 0.6;

transition: 1s .5s opacity;

}

圖片標(biāo)題的垂直居中放置使用了一些小技巧，并為它提供一個半透明的背景。你也可以設(shè)置figcaption為完全不透明的背景，就像一張明信片的效果。

3D翻轉(zhuǎn)效果

現(xiàn)在在鼠標(biāo)滑過時添加卡片的3D翻轉(zhuǎn)效果：

div.flip-3d:hover figure { transform: rotateY(.5turn); }

div.flip-3d:hover figure figcaption { opacity: 1; }

為什么不直接在Figure元素上設(shè)置:hover？

在每個figure元素上包裹一個div視乎顯得有些多余，為什么不直接在figure元素上設(shè)置:hover偽元素呢？

原因是figure元素在翻轉(zhuǎn)的時候，它的活動區(qū)域會逐漸變小，有時候瀏覽器不知道鼠標(biāo)是在figure元素之內(nèi)還是之外，造成一些解析上的錯誤。

添加陰影效果

我們使用一個徑向漸變來制作陰影效果：

div.flip-3d figure:after {

content: " "; display: block;

height: 8vw; width: 100%;

transform: rotateX(90deg);

background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);

}

所得到的效果如下圖所示：

到此這個效果就完成了，希望對你有所幫助。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。