在前不久我們講解了CSS3 3D卡片翻轉技術，在這篇文章中，我們要跟進一步，在卡片3D翻轉的基礎上，制作卡片的動態陰影效果。最終效果是鼠標滑過圖片時，卡片會3D翻轉，圖片的背面顯示圖片的標題，在圖片的頂部時圖片的陰影，陰影也會隨圖片一起3D翻轉。

HTML結構

這個CSS3 3D卡片翻轉特效的HTML結構很簡單。

Mouse

Irrigation rats

Rabbit

注意：每一個包裹

的將用于插件3D空間。

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

每一個figcaption都要設置為和響應式圖片一樣的大小。

圖片標題反向放置，放置在圖片的背面。

創建一個和圖片一起運動的dropshadow，不用添加額外的代碼。

CSS樣式

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

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

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

接下來，將

元素中的圖片設置為響應式的，為了使元素盡可能的有效，這里只跟蹤元素的transformation。同時不要忘記設置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來設置對小屏幕的支持，你可以在demo中縮放瀏覽器來看看效果。

圖片標題的位置

圖片的標題使用position: absolute放置在圖片上面(前面已經將

元素設置為position: relative)，然后通過rotate和translate將圖片標題放到圖片的背面去，達到這種效果的前提是元素設置了正確的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;

}

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

3D翻轉效果

現在在鼠標滑過時添加卡片的3D翻轉效果：

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

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

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

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

原因是figure元素在翻轉的時候，它的活動區域會逐漸變小，有時候瀏覽器不知道鼠標是在figure元素之內還是之外，造成一些解析上的錯誤。

添加陰影效果

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

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位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。