- 旋转函数rotate()，deg表示度数，transform-origin表示旋转的基点
<head> <title>无标题文档</title> <style> body{height:400px;border:1px solid #000;} .box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;} body:hover .box{ -webkit-transform:rotate(360deg);} </style> </head> <body> <div class="box">111</div> </body>
- 斜切，将矩形等形状扭曲，skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg)
<head> <title>无标题文档</title> <style> body{height:400px;border:1px solid #000;} .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;} body:hover .box{ -webkit-transform:skewX(45deg);} </style> </head> <body> <div class="box">111</div> </body>
- 缩放，scale()
<head> <title>无标题文档</title> <style> body{height:400px;border:1px solid #000;} .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;} body:hover .box{ -webkit-transform:scale(2);} </style> </head> <body> <div class="box">111</div> </body>
- 位置移动，translate(100px 200px)，translateX(100px)，translateY(200px)
<head> <title>无标题文档</title> <style> body{height:400px;border:1px solid #000;} .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;} body:hover .box{ -webkit-transform:translate(-100px,200px);} </style> </head> <body> <div class="box">111</div> </body>