網站建設之教你使用CSS 3D輪轉展示產品資訊
有很多展示產品資訊的方式，如滑鼠懸停圖片展示，甚至是彈出。在這裡，我們將學習如何使用CSS 3D輪轉展示產品資訊。
工具/原料
Dreamweaver CS5 css
步驟/方法
成品
在談論技術前，下面的圖片是我們想要達到的結果，產品的形象是可見的，而該產品的資訊被隱藏。當用戶滑鼠懸停產品圖片上，他們都將在垂直向上的方向旋轉，使產品圖片隱藏起來，而展示出產品資訊，看起來就像一個旋轉的立方體。
技術
做這個翻轉立方體，我們將用到的技術是從以前我們做過的（用css3和jquery做搜尋框）。這有兩個元素，前部和底部，前面是產品圖片，底部是產品資訊。
有兩個元素包裝它們，第一個命名為wrapper,用來設定透明度，旨在定義從使用者角度到相對元素有多遠，相對值小的將放在相對近的。第二個元素命名為item並被wrapper包裝，裡面包含產品圖片和資訊，這個元素有一個懸停事件將其X軸旋轉95度顯示產品資訊和隱藏影象。
標記和樣式
每個產品有兩種包裝元素和一個單一的資訊元素如前所述，下面是標記：
ContactFormTheeasiestwaytoaddacontactformtoyourshop.
每個包裝內聯塊顯示屏,角度值4000px，item將有保留-3D變換風格，其子級保留其三維位置，當翻轉時也有過渡屬性。
.wrapper{
display:inline-block;
width:310px;
height:100px;
vertical-align:top;
margin:1em1.5em2em0;
cursor:pointer;
position:relative;
font-family:Tahoma,Arial;
perspective:4000px;}
.item{height:100px;
transform-style:preserve-3d;
transition:transform.6s;}
產品形象和產品資訊，將有過渡，他們都將改變其邊界半徑和陰影框值，當用戶懸停，這個目標使過渡更優雅。
.itemimg{
display:block;
position:absolute;
top:0;
border-radius:3px;
box-shadow:0px3px8pxrgba(0,0,0,0.3);
transform:translateZ(50px);
transition:all.6s;}
.item.information{
display:block;
position:absolute;
top:0;
height:80px;
width:290px;
text-align:left;
border-radius:15px;
padding:10px;
font-size:12px;
text-shadow:1px1px1pxrgba(255,255,255,0.5);
box-shadow:none;
background:linear-gradient(top,rgba(236,241,244,1)0%,rgba(190,202,217,1)100%);
transform:rotateX(-90deg)translateZ(50px);
transition:all.6s;}
最後，當用戶懸停產品，它會旋轉的item元素和變化影象和資訊的邊界半徑和箱陰影。
.item:hover{
transform:translateZ(-50px)rotateX(95deg);}
.item:hoverimg{
box-shadow:none;border-radius:15px;}
.item:hover.information{
box-shadow:0px3px8pxrgba(0,0,0,0.3);
border-radius:3px;}
革命成功，戰利品如下：
注意事項
這個立方體3D轉換效果可以相容部分流覽器，我還新增使用Modernizr的檢查瀏覽器功能的指令碼檢測。