Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
617
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);
}
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡