在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
浏览器支持：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。
1.旋转
分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>旋转</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #A4E786; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .rotate:nth-child(2):hover { 19 transform: rotate(45deg); 20 } 21 22 .rotate:nth-child(3):hover { 23 transform: rotateX(45deg); 24 } 25 26 .rotate:nth-child(4):hover { 27 transform: rotateY(45deg); 28 } 29 30 .rotate:nth-child(5):hover { 31 transform: rotateZ(45deg); 32 } 33 34 .rotate:nth-child(6):hover { 35 transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); 36 } 37 38 .rotate:nth-child(7):hover { 39 transform: scale(0.5) rotateY(45deg) rotateZ(45deg); 40 } 41 42 /* 在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。 */ 43 /* transform-origin属性，可以改变变形的基准点。 */ 44 /* 基准点在元素水平方向上的位置属性值：left、center、right */ 45 /* 基准点在元素垂直方向上的位置属性值：top、center、bottom */ 46 .rotate:nth-child(8):hover { 47 transform: rotate(45deg); 48 transform-origin: left bottom; //把基准点修改为元素的左下角 49 } 50 51 /* 分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。 */ 52 </style> 53 <body> 54 <div class="rotate">1</div> 55 <div class="rotate">2</div> 56 <div class="rotate">3</div> 57 <div class="rotate">4</div> 58 <div class="rotate">5</div> 59 <div class="rotate">6</div> 60 <div class="rotate">7</div> 61 <div class="rotate">8</div> 62 </body> 63 </html>
2.缩放
分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>缩放</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #B5FEFB; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .scale:nth-child(2):hover { 19 transform: scale(0.5); 20 } 21 22 .scale:nth-child(3):hover { 23 transform: scaleX(0.5); 24 } 25 26 .scale:nth-child(4):hover { 27 transform: scaleY(0.5); 28 } 29 30 .scale:nth-child(5):hover { 31 transform: scaleZ(0.5); 32 } 33 34 .scale:nth-child(6):hover { 35 transform: scaleX(0.5) scaleY(0.5); 36 } 37 38 .scale:nth-child(7):hover { 39 transform: scaleX(0.5) scaleY(0.5) rotateX(45deg); 40 } 41 42 /* 分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。 */ 43 </style> 44 <body> 45 <div class="scale">1</div> 46 <div class="scale">2</div> 47 <div class="scale">3</div> 48 <div class="scale">4</div> 49 <div class="scale">5</div> 50 <div class="scale">6</div> 51 <div class="scale">7</div> 52 </body> 53 </html>
3.倾斜
分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>倾斜</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #DF68C5; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .skew:nth-child(2):hover { 19 transform: skew(45deg); 20 } 21 22 .skew:nth-child(3):hover { 23 transform: skew(30deg, 30deg); 24 } 25 26 .skew:nth-child(4):hover { 27 transform: skewX(45deg); 28 } 29 30 .skew:nth-child(5):hover { 31 transform: skewY(45deg); 32 } 33 34 /* 分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度 */ 35 </style> 36 <body> 37 <div class="skew">1</div> 38 <div class="skew">2</div> 39 <div class="skew">3</div> 40 <div class="skew">4</div> 41 <div class="skew">5</div> 42 </body> 43 </html>
4.移动
分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>移动</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #DF68C5; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .translate:nth-child(2):hover { 19 transform: translate(50px); 20 } 21 22 .translate:nth-child(3):hover { 23 transform: translate(50px, 50px); 24 } 25 26 .translate:nth-child(4):hover { 27 transform: translateX(50px); 28 } 29 30 .translate:nth-child(5):hover { 31 transform: translateY(50px); 32 } 33 34 .translate:nth-child(6):hover { 35 transform: translateZ(50px); 36 } 37 38 /* 分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。 */ 39 </style> 40 <body> 41 <div class="translate">1</div> 42 <div class="translate">2</div> 43 <div class="translate">3</div> 44 <div class="translate">4</div> 45 <div class="translate">5</div> 46 <div class="translate">6</div> 47 </body> 48 </html>
5.基准点（transform-origin）
没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
transform-origin(X,Y):
用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样。
transform-origin并不是transform中的属性值，跟其他的css3属性一样，需要在不同的浏览内核中加上相应的前缀。
6.多方法组合变形
同时使用多个转换，综合使用这几个用法其格式为 transform: translate() rotate() scale();
变形的顺序是从左到右依次进行，顺序会影响到转换的效果(先旋转会改变坐标轴方向)，顺序可以随意，不同的顺序导致变形结果不同；
但我们同时有位置或者其他属性的时候，个人习惯将位移放到最前面。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>多方法组合变形</title> 6 </head> 7 <style> 8 div:nth-child(1) { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #FFC0CB; 14 position: absolute; 15 transition: all 1s ease-in-out; 16 } 17 18 div:nth-child(1):hover, 19 div:nth-child(2) { 20 width: 100px; 21 height: 100px; 22 line-height: 100px; 23 text-align: center; 24 background-color: #DF68C5; 25 position: absolute; 26 transform: translate(100px, 100px) rotate(45deg) scale(0.5) skew(30deg, 30deg); 27 } 28 </style> 29 <body> 30 <div>变化前</div> 31 <div>变化后</div> 32 </body> 33 </html>