CSS3的3D Transition

CSS3可以做3D的變形，不過是基本的繞著XYZ軸的變形，但還是可以玩一些新東西，連著transition一起來介紹一下。

首先準備這樣的結構。
<div class="box" id="b1">
<img src="pic.jpg">
</div>
<div class="box" id="b2">
<img src="pic.jpg">
</div>
<div class="box" id="b3">
<img src="pic.jpg">
做一個當我們滑過圖片的時候，他會有一個翻轉的效果。

還沒用過transition的可以參考這篇說明。
.box img
{
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
這邊讓box下面的img有transition的效果。

最後當我們滑過三張圖片的時候，分別做X, Y, Z軸的旋轉。
#b1:hover img{
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-moz-transform: rotateX(180deg); /* Firefox */
}
#b2:hover img{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-moz-transform: rotateY(180deg); /* Firefox */
}
#b3:hover img{
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg); /* Safari and Chrome */
-moz-transform: rotateZ(180deg); /* Firefox */
}

DEMO