版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/happyhaojie/article/details/51158450
以后有时间再来写。
<!DOCTYPE html>
<html>
<head>
<style>
.d1{
border:2px solid red;
width:200px;
height:100px}
.d2
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:scale(0.3,0.3) translateX(100px);
transform:scale(1,1);
}
</style>
</head>
<body>
<div class="d1"><div class="d2">Hello World</div></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
.d1{
border:2px solid red;
width:200px;
height:100px}
.d2
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:translateX(100px);
transform:translateX(100px);
}
</style>
</head>
<body>
<div class="d1"><div class="d2">Hello World</div></div>
</body>
</html>多个transform只需要依次在一个transform后面添加即可，中间用空格分开，例如：
|
1
|
-webkit-transform:scale(
2
,
2
) rotate(
180
deg);
|
这样既放大又旋转