CSS3打造帶陰影的旋轉3D圖像

Sponsor

CSS3可以實現很多創新好玩的交互效果，正如今天將和大家介紹的3D旋轉圖像，效果很漂亮，這個旋轉圖像的特別之處就是支持陰影旋轉和兼容響應式網頁設計，使得整體場景非常有感覺。

代碼的實現也很簡潔，下面來看看這個介紹和CSS代碼教程，完全不需要JavaScript哦！純CSS3打造。為了查看最佳效果，請使用Firefox瀏覽器瀏覽。

在線演示：DEMO查看 (請使用Firefox瀏覽)

正面：鼠標移上去就開始旋轉

旋轉中：這是旋轉至背面的效果，以旋轉并帶半透明漸變的方式顯示。

背面：旋轉后，為圖像添加一些文字介紹元素，充實這個元素。

代碼教程

HTML代碼準備

這是一個標題

這是一段圖片相關的簡介內容。。

CSS代碼

用Perspective屬性給圖像設置透視視圖，使用浮動是為了制作成一個相冊列表。設置寬度使用了百分比，為了兼容響應式設計而制作，大家在瀏覽DEMO的時候可以縮小瀏覽器看看效果。

.photo-container {

perspective: 1200px; /* 透視視圖 */

width:45%;

float:left;

}

.rotate-box {

position:relative;

transform-style: preserve-3d; /* 3D 轉換 */

transition:1s ease; /* 轉換效果持續 1秒 */

margin:10%;

}

.rotate-box img {width:100%;height:auto;}

背面文本樣式，透明背景，并設置默認為反轉180度，其次要將圖像置于圖像的背面，所以這里我們利用z軸來控制，CSS代碼如下：

.text {

position:absolute;top:0;

width:100%;height:100%;

transform: rotateY(180deg) translateZ(1px); /* 反轉180度 并設置z軸讓其置于圖片背面 */

color:#666;

text-align:center;

opacity:.06;

background:rgba(255,255,255,.9);

transition: 1s opacity;

}

使用Hover來觸發動畫

.photo-container:hover .rotate-box{

transform: rotateY(180deg);

}

.photo-container:hover .text{opacity:1}

通過偽元素(:after)給圖像添加一個透視陰影，使整體更有3D立體感覺。

.rotate-box:after {

content:' ';

display:block;

width:100%;

height:7vw; /* vw是移動設計備窗體單位*/

transform:rotateX(90deg);

background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /*?radial-gradient 是徑向漸變 */

}

代碼就這么多，如果有不理解或是有更好的建議歡迎在下方評論處留言。也希望借助這個例子能觸發你們的創意靈感，CSS3日后必會成為主流，我們應該多點學習和使用這些新技術。

在線演示：DEMO查看 (請使用Firefox瀏覽)

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。

贊助商鏈接

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。

版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。

琹①蕊╃嚮榮 -

2013 年 09 月 16 日 下午 2:54

怎么應用這代碼呢？

琹①蕊╃嚮榮 -

2013 年 09 月 16 日 下午 2:54

沒看明白。

曉風東東 -

2013 年 09 月 14 日 下午 4:34

效果很不錯 贊一個

薩龍龍 -

2013 年 09 月 09 日 下午 1:16

效果震撼，CSS3太強大。

{ 發表評論 }

姓 名 (必填)

郵 件 (必填)

網 站

總結

以上是生活随笔為你收集整理的html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像的全部內容，希望文章能夠幫你解決所遇到的問題。

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