家好，今天跟大家分享的是純CSS實現鼠標滑過圖片3D翻轉效果的方法，下面看下效果圖：

效果圖

效果分析：從效果圖中可以看到當鼠標滑過圖片時，圖片延Y軸-90°旋轉逐漸消失，而與圖片相關的文字部分延Y軸旋轉-90°逐漸顯現，當鼠標移開時又逐漸恢復到初始位置。初始位置時圖片和文字部分的位置關系如下圖所示：

初始位置

HTML結構：全部內容置于一個div（.main)盒子內，里面有三個主體div(.box)，每個.box中有兩個div(.back和.front)，.front用于放置圖片，本例中以背景的形式添加，.back用于放置文本信息，里面包含一個標題，一段文字，兩條白色橫線（由<span></span>標簽生成），下圖為HTML代碼：

CSS設置：

主體div（.box）樣式設置：“transform-style:perspective-3d”讓元素在3D空間內呈現，延X軸旋轉-10°調整可視面，這兩步是為了讓元素看上去更立體，在日記翻頁效果教程中有提到過；“display-inline-block"讓三幅圖片在同行顯示。"position:relative"因為后面子元素需要絕對定位。

文本部分（.black)樣式設置：與父元素.box同高同寬，位置覆蓋，給一個背景顏色和適當的透明度（opacity：0.8），延Y軸順時針旋轉90°，垂直電腦平面，必須在此處添加過渡效果，如果在hover中添加會導致鼠標移開時動畫過渡生硬，直接恢復到初始位置。

圖片部分（.front）樣式設置：動畫過渡效果同上，依舊在此處添加，不要添加到hover中，分別以背景的形式添加圖片。

文本信息具體樣式設置：都是一些基本樣式，根據個人喜好隨便搞，文中的兩條白色橫線由<span> 標簽生成，220像素的寬即長度，1個像素的高則是粗細程度，顏色由背景顏色生成。

hover樣式設置：當鼠標滑過.box區域時，正常顯示的圖片部分延Y軸逆時針旋轉90°與電腦平面垂直逐漸在視線中消失，而文本信息部分延Y軸逆時針旋恢復到原始位置逐漸顯示，鼠標移開時各自又慢慢回復到初始位置。上面提到的過渡效果如果添加到這里的hover中，鼠標移開時兩者會直接生硬地恢復到初始位置。

好了大功告成，刷新頁面查看效果吧！

如果發現問題請及時@窗外樓，不勝感激！

家好，本篇文章分享小方塊永久旋轉的動畫特效，歡迎參考和指正。

效果圖：

HTML代碼：

<div class='tui-demo-1'></div>

CSS代碼：

<style type="text/css">
.tui-demo-1 {
 width: 100px;
 height: 100px;
 background: #FF5722;
 margin: 50px auto;
 animation: tui-demo-1 1.0s infinite;
}
@keyframes tui-demo-1 {
 0% {
 transform: perspective(180px) rotateX(0deg) rotateY(0deg);
 }
 100% {
 transform: perspective(180px) rotateX(0deg) rotateY(180deg);
 }
}
</style>

知識點：

animation：是CSS3的動畫屬性，這里把animation綁定到tui-demo-1元素上，并指定該動畫需要1秒完成，infinite則表示無限次播放該動畫。

@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這里0％是動畫開頭，100％是動畫結束。

transform：該屬性應用于2D元素或3D元素的轉換，允許元素發生旋轉，縮放，移動，傾斜等效果。這里的perspective允許改變3D元素的透視圖，且只影響3D元素的轉換。rotateX表示沿著X軸作3D旋轉，rotateY表示沿著Y軸作3D旋轉。

最后注意下瀏覽器兼容問題，animation，transform等可再創建-webkit-,-ms-或-moz-配置。如：-webkit-animation: tui-demo-1 1.0s infinite;

有問題可以留言，大家一起學習HTML+CSS網頁設計。

惠券一般在商城項目中常用到，今天就來講解下如何用純CSS3來實現該效果：

效果圖如下：

首先該效果中左右有兩個鋸齒形的波浪調，背景圖還有不同色的間隔，下面來看看實現代碼：

html:

具體CSS:

難點實現方法審查元素具體詳解：

該背景層實現運用到了CSS3旋轉屬性