实例1：transform：rotate（）旋转变换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:rotate()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:rotate(30deg);/*顺时针旋转30度*/ } </style> </head> <body> <div class="box">111</div><!-- 文字一同旋转 --> </body> </html> 实例2：transform：skew（）斜切变换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skewX()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skewX(15deg);/*底边水平向右移动，改变左边与Y轴夹角15deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skewY()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skewY(15deg);/*左边水平向上移动，改变底边与X轴夹角15deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skew(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skew(15deg,30deg);/*左边与Y轴夹角15deg，底边与X轴夹角30deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html> 实例3：transform：scale（）缩放变换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:scale(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } div[class^='box']{ width:100px; height:100px; background:red; margin:100px ; transition: 2s; float: left; font:50px/100px "宋体"; text-align:center; } body:hover .box1{ -Webkit-transform:scale(0.5);/*小于1缩小*/ } body:hover .box2{ -Webkit-transform:scale(2);/*大于1放大*/ } div:nth-child(even){ color:rgba(255,255,255,1); } div:nth-child(odd){ color:rgba(0,0,0,1); } </style> </head> <body> <div class="box1"> 缩小 </div> <div class="box2"> 放大 </div> <div class="box1"> 缩小 </div> <div class="box2"> 放大 </div> </body> </html> 实例4：transform：translate（）位移变换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:translate(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; font:50px/100px "宋体"; color:#fff; text-align:center; } body:hover .box{ -Webkit-transform:translate(100px); /*transform:translateX(正数为从左往右 负数为从右往左); transform:translateY(正数为从上往下 负数为从下往上);*/ } </style> </head> <body> <div class="box"> 位移 </div> </body> </html> 实例5：transform-origin（X，Y） 旋转的基点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin:</title> <style> body{ height:400px; border:solid 1px #000; } .box{ height:100px; width: 100px; background:red; margin:100px auto; transition:5s; -Webkit-transform-origin:right bottom;/*如果设置的两个值都是0，则围绕左上角旋转*/ } body:hover .box{ -Webkit-transform:rotate(360deg) scale(0); } </style> </head> <body> <div class="box"> 转呀转 </div> </body> </html>
总结：
transform：rotate（角度）顺时针 单位deg
transform：skew（斜切X，斜切Y）单位deg
：skewX（斜切X）
：skewY（斜切Y）
transform：scale（缩放X，缩放Y）无单位(>1放大/<1缩小)
：scaleX（缩放X）
：scaleY（缩放Y）
transform：translate（位移X，位移Y）单位px 若只写一个值谷歌浏览器默认为水平移动，竖直方向不动
：translateX（位移X）
：translateY（位移Y）
X正值：从左至右，负值：从右至左
Y正值：从上至下，负值：从下至上
transform-origin（X，Y） 单位em、px、%、left、center......
1、top left | left top 等价于 0 0 | 0% 0% 2、top | top center | center top 等价于 50% 0 3、right top | top right 等价于 100% 0 4、left | left center | center left 等价于 0 50% | 0% 50% 5、center | center center 等价于 50% 50%（默认值） 6、right | right center | center right 等价于 100% 50% 7、bottom left | left bottom 等价于 0 100% | 0% 100% 8、bottom | bottom center | center bottom 等价于 50% 100% 9、bottom right | right bottom 等价于 100% 100%
transform：rotate（角度）skew（斜切X，斜切Y）scale（缩放X，缩放Y）translate（位移X，位移Y）；取值从从面的属性开始计算。
实例1：