CSS之2D转换

作者：System 时间：2024年08月07日分类：所有,css 字数：737

CSS的2D转换包括移动（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等功能。以下是每个转换的简单示例：




.element-translate {
  transform: translate(50px, 100px); /* 水平方向移动50px，垂直方向移动100px */
}




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




.element-scale {
  transform: scale(1.5, 0.5); /* 水平方向放大1.5倍，垂直方向缩小0.5倍 */
}




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

可以通过组合使用这些2D转换，创建出复杂的效果。例如，旋转并缩放一个元素：




.element-rotate-and-scale {
  transform: rotate(45deg) scale(1.5, 0.5); /* 先旋转然后缩放 */
}

记得在使用转换时，可能需要添加浏览器前缀，以确保兼容性，如 -webkit-transform 用于Chrome、Safari和新版本的Opera。