css3中关于transform rotate、translate()、skew()、scale()的复合变换

css3中这几个rotate、translate、skew()、scale()要同时使用只要在一行的transform中用空格隔开。

eg:transform:rotate(30deg) translate(100px,100px) skew(20deg);

but:

在rotate之后再进行translate()、skew()、scale()时,x轴y轴不再是绝对水平或绝对竖直，而是随着rotate转换的角度而进行调整，始终是随着物体的水平或垂直。

eg:

div{

width:400px;

height:400px;

border:2px solid red;

background-color:gray;

transform:rotate(30deg)  translate(100px,100px) skew(30deg) scale(2);

}

<div></div>