Home Web CSS

# Transform-origin

  • 預設值為元素中心點 (50%, 50%)
  • 位移、旋轉、縮放、傾斜的參考點
  • 元素左上角座標為 (x, y) = (0, 0)

元素預設座標系統預設位置為左上角 (0,0)，主要用來排版
transform 的預設值為 (50%,50%)，主要用來做動畫效果

transform 讓我們可以移動、旋轉、縮放或傾斜元素。

# 2D Transform Methods

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

# Translate()

translate() 可以根據給定的參數 (X-axis, Y-axis) 位移元素。

Examplelink
/* Moves the <div> element 50 pixels to the right, and 100 pixels down from its current position */
div {
    transform: translate(50px, 100px);
}

# Rotate()

rotate() 可以根據給定的角度順時針或逆時針旋轉元素。

Example 1link
/* Rotates the <div> element clockwise with 20 degrees */
div {
    transform: rotate(20deg);
}
Example 2link
/* Rotates the <div> element counter-clockwise with 20 degrees */
div {
    transform: rotate(-20deg);
}

# Scale()

  • scale() 可以根據給定的參數 (width, height) 縮放元素的大小。
  • scaleX() 控制縮放的寬度 (width)
  • scaleY() 則控制縮放的高度 (height)。
Example 1link
/* Increases the <div> element to be two times of its original width, and three times of its original height */
div {
    transform: scale(2, 3);
}
Example 2link
/* Decreases the <div> element to be half of its original width and height */
div {
    transform: scale(0.5, 0.5);
}
Example 3link
/* Increases the <div> element to be two times of its original width */
div {
    transform: scaleX(2);
}
Example 4link
/* Decreases the <div> element to be half of its original height */
div {
    transform: scaleY(0.5);
}

# Skew()

  • skew() 可以根據給定的角度 (X-axis, Y-axis) 傾斜元素
  • skewX() 將元素沿著 X-axis 傾斜。
  • skewY() 將元素沿著 Y-axis 傾斜。
Example 1link
/* Skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis */
div {
    transform: skew(20deg, 10deg);
}
Example 2link
/* Skews the <div> element 20 degrees along the X-axis */
div {
    transform: skewX(20deg);
}
Example 3link
/* Skews the <div> element 20 degrees along the Y-axis */
div {
    transform: skewY(20deg);
}

# Matrix()

matrix() 整合所有 2D transform 方法。

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Examplelink
div {
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

# 3D Transform Methods

  • rotateX()
  • rotateY()
  • rotateZ()
Example 1link
/* Rotates an element around its X-axis at a given degree */
div {
    transform: rotateX(150deg);
}
Example 2link
/* Rotates an element around its Y-axis at a given degree */
div {
    transform: rotateY(150deg);
}
Example 3link
/* Rotates an element around its Z-axis at a given degree */
div {
    transform: rotateZ(150deg);
}