[CSS] 2D變形效果 transform 以及 transform-origin

2D的transform變形效果：

• translate()、translateX()、translateY()：可在不影響文件中其他內容的情況下移動元素，相當方便。
• scale()、scaleX()、scaleY()：能加大或縮小元素尺吋。
• skewX()、skewY()：傾斜變形元素，便能使該元素顯得歪斜或扭曲。
• rotate()：旋轉。
• transform-origin：改變基準點

範例：

.banner-ad {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -webkit-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);
  -moz-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);
}

.showcase .button {
  -webkit-transform: skewX(10deg) skewY(10deg);
}