一、CSS3 2D转换：
CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。
2D变换的方法：translate()、rolate()、scale()、skew()、matrix()。
<style>
div
{
width:200px;
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(30deg);
}
</style>
1、translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。translate(50px，100px)是从左边元素移动50个像素，并从顶部移动100个像素。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
}
</style>
2、rolate()方法，在一个给定度数顺时针旋转的元素，负值是元素逆时针旋转。rolate(60deg)元素顺时针旋转60度。
<style>
div
{
width:100px;
height:75px;
background-color:grey;
border:1px solid black;
}
div#div2
{
transform:rotate(60deg);
-ms-transform:rotate(60deg); /* IE 9 */
-webkit-transform:rotate(60deg); /* Safari and Chrome */
}
</style>
3、scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。scale(2,3)转变宽度为原来的2倍大小、高度为原来的3倍大小。
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
</style>
4、skew()方法的语法：
transform:skew(<angle> [,<angle>]);包含两个参数，分别表示X轴和Y轴倾斜的角度。如果第二个参数为空，则默认为0，参数为负表示向相反的方向倾斜。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
5、matrix()方法有六个参数，包含旋转、缩放、移动和倾斜功能。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
2D转换方法：
二、CSS3 3D转换：
1、rotateX()：围绕其在一个给定度数X轴旋转。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
2、rotateY()：围绕其在一个给定度数Y轴旋转。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
转换属性：
3D转换方法：
