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

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

此篇文章瀏覽量: 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);
}

若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。

熱門推薦

本文由 Carlos Chang 提供 原文連結

Carlos Chang
寫了445篇文章,獲得0次喜歡
留言回覆
回覆
精彩推薦