CSS中的Transform可以直接改變網頁中的元素

套用Transform之後並不會改變元素本來在HTML中版面的位置或大小

而是顯示上被改變了

用下面的例子可以看到放大的元素不會因為放大而自動往下排版

而是直接覆蓋過附近的元素

Table of Contents

常用的transform

Rotate

Rotate就是將畫面中的元素旋轉

用法： 

1
transform: rotate(45deg);/* 順時鐘旋轉45度 */

Scale

Rotate就是將畫面中的元素放大縮小

用法： 

1
2
3
transform: scale(2);
transform: scale(0.3);
transform: scale(.5,2); /* x軸方向縮小一半，y方向放大兩倍 */

Skew

Skew就是將畫面中的元素作傾斜

用法： 

1
2
transform: skew(45deg, 0);/* 相對垂直軸傾斜45度 */
transform: skew(0, 45deg);/* 相對水平軸傾斜45度 */

Origin

通常在套用Transform的時候

瀏覽器會自動以元素的中心點作為Transform的參考點

我們也可以透過 transform-origin 來作改變

1
2
3
transform-origin: left top; /* 透過keywords去調整 */
transform-origin: 0 0; /* 透過px值去調整 */
transform-origin: 0% 0%; /* 透過百分比去調整 */