本文包含
1.CSS3中2D轉換和3D轉換的介紹。
2.在相冊中的應用實例。
CSS3中的轉換效果和動畫效果十分強大好用，可以實現一些常見的動態效果。
如此一來，CSS3便可以代替許多jQuery的功能。
先來介紹一下CSS中的轉換。
CSS3中轉換有2D轉換和3D轉換之分。
2D轉換(簡單來說就是讓某個元素改變大小和位置):
1.translate()方法
該方法包含兩個參數，分別是對應的x軸，y軸偏移的距離(相對於控件的原位置進行移動)。
也可以根據translateX()方法單獨設置x軸偏移量，translateY()方法設置Y軸偏移量。
2.rotate()方法
此方法包含一個參數，表示該空間以中心為圓心，順時針轉過的角度。可以為負值，表示逆時針轉過的角度。
3.scale()方法
此方法包含兩個參數，代表沿X軸和沿Y軸擴大的倍數。
4.skew()方法
skew()方法，該元素會根據X軸和Y軸線參數旋轉給定的角度
5.matrix()方法
matrix方法將2D轉換的方法合並為一個
matrix 方法有六個參數，包含旋轉，縮放，移動和傾斜功能。
3D轉換:
3D轉換主要有一個方法。
rotateX(),rotateY(),rotateZ()。參數為一個角度值，分別圍繞着X,Y,Z軸轉相應的角度。
下面多介紹一個過渡屬性transition:
transition：CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果何時開始。默認是 0。
接下來是一個純CSS3轉換效果做的相冊例子
用到多種轉換方法
HTML:
<body> <div class="d_photo"> <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div> <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div> <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div> <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div> <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div> <div class="d_photo"> <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div> <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div> <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div> <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div> <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div> </div> </body>
CSS：
body{
width: 100%;
background-image: url("img/bg.jpg") ;
}
.d_photo{
width: 900px;
height: 180px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.sig_photo{
float: left;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: 20px;
}
img{
width: 150px;
height: 150px;
-moz-transition: width 1s,height 1s,transform 1s;
-webkit-transition: width 1s,height 1s,transform 1s;
}
#pic1{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic2{
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
#pic3{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic4{
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}
#pic5{
-moz-transform: rotate(6deg);
-webkit-transform: rotate(-6deg);
}
#pic6{
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
#pic7{
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
#pic8{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic9{
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}
#pic10{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic1:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(360deg);
-webkit-transform:rotate(360deg);
}
#pic2:hover{
z-index: 10;
-moz-transform: scale(1.15);
-webkit-transform:scale(1.15);
}
#pic3:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
#pic4:hover{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 10;
}
#pic5:hover{
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
z-index: 10;
}
#pic6:hover{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
z-index: 10;
}
#pic7:hover{
width: 300px;
height: 350px;
-moz-transform: translate(100px,-170px);
-webkit-transform: translate(100px,-170px);
z-index: 10;
}
#pic8:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: translate(0px,-170px);
-webkit-transform: translate(0px,170px);
}
以上1-8每張圖片，每張都是一種常用的轉換方法，在此就不截圖說明了，有興趣可以試試。