2d变换 css

CSS 2D变换是Web开发者经常使用的特性之一。这些变换可以通过几个简单的CSS属性来实现，这些属性可以是在单个元素中定义的，也可以在群组中定义。

/*在单个元素中定义CSS变换*/
.Box{
  transform: translateX(50px) rotate(45deg) scale(1.2);
}

/*在群组中定义CSS变换*/
.container{
  transform: translateX(50px);
}

.Box{
  transform: rotate(45deg) scale(1.2);
}

在上面的例子中，我们可以看到单个元素中如何使用CSS变换，它将元素沿着X轴向右平移50像素，沿着Z轴旋转45度，同时将元素的大小按比例增加20%。我们还可以看到如何在群组中使用CSS变换，它将容器沿着X轴向右平移50像素，并将容器内的所有元素沿着Z轴旋转45度，并将它们的大小按比例增加20%。

对于2D变换，我们可以使用以下属性：

• transform: translate(x,y)
• transform: rotate(angle)
• transform: scale(x,y)
• transform: skew(x-angle,y-angle)
• transform: matrix(n,n,n)

例如，我们可以使用以下代码块将一个元素旋转45度：

.Box{
  transform: rotate(45deg);
}

现在您已经了解了2D变换，应该开始在您的项目中应用它们了！