CSS中的transform（二维变换）

作者：System 时间：2024年08月10日分类：所有,css3 字数：641

CSS的transform属性可以对元素进行2D或3D转换。下面是一些使用transform进行二维变换的例子：




.rotated {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}




.scaled {
  transform: scale(1.5, 0.8); /* 水平方向放大1.5倍，垂直方向放大0.8倍 */
}




.translated {
  transform: translate(50px, 100px); /* 水平方向平移50像素，垂直方向平移100像素 */
}




.skewed {
  transform: skew(30deg, 20deg); /* 水平方向倾斜30度，垂直方向倾斜20度 */
}

使用transform时，你可以将多个变换组合在一起，例如：




.multiple-transforms {
  transform: rotate(45deg) scale(1.5) translate(100px, 200px);
}

以上代码将先旋转45度，然后缩放，最后平移。