2012年3月16日 星期五

CSS3的3D Transition

css33d
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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...