CSS轉換

如何使用CSStransform財產

變換使您可以在2D或3D空間中平移,旋轉,縮放和傾斜元素。它們是非常酷的CSS功能,尤其是與動畫結合使用時。

2D轉換

transform屬性接受以下功能:

  • translate()移動元素
  • rotate()旋轉元素
  • scale()縮放元素的大小
  • skew()扭曲或傾斜元素
  • matrix()一種使用6個元素的矩陣執行上述任何一種操作的方式,一種不太友好的語法,但是冗長的

我們還具有特定於軸的功能:

  • translateX()在X軸上四處移動元素
  • translateY()在Y軸上四處移動元素
  • scaleX()在X軸上縮放元素的大小
  • scaleY()在Y軸上縮放元素的大小
  • skewX()在X軸上扭曲或傾斜元素
  • skewY()在Y軸上扭曲或傾斜元素

這是一個轉換示例,該更改會更改.box元素寬度乘以2(重複),高度乘以0.5(減少一半):

.box {
	transform: scale(2, 0.5);
}

transform-origin讓我們設置原點((0, 0)坐標)進行轉換,讓我們更改旋轉中心。

結合多個變換

您可以通過用空格分隔每個函數來組合多個變換。

例如:

transform: rotateY(20deg) scaleX(3) translateY(100px);

3D轉換

我們可以更進一步,將元素移動到3D空間而不是2D空間。對於3D,我們添加了另一個軸Z,這增加了視覺效果的深度。

使用perspective屬性,您可以指定3D對象與查看器的距離。

例子:

.3Delement {
  perspective: 100px;
}

perspective-origin確定查看器位置的外觀,以及我們如何在X和Y軸上查看它。

現在,我們可以使用其他功能來控制Z軸,這些功能加起來就是其他X軸和Y軸的變換:

  • translateZ()
  • rotateZ()
  • scaleZ()

和相應的速記translate3d()rotate3d()scale3d()作為使用translateX()translateY()translateZ()功能等。

免費下載我的CSS手冊


更多CSS教程: