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教程: