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>