[CSS]CSS3 2D 转换

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

这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。

CSS3 2D 转换是一种改变元素位置的技术，可以对元素进行移动、旋转、缩放和倾斜。以下是一些常用的2D转换方法及其代码示例：




div {
  transform: translate(50px, 100px);
}




div {
  transform: rotate(30deg);
}




div {
  transform: scale(1.5, 0.8);
}




div {
  transform: skew(30deg, 20deg);
}




div {
  transform: matrix(1, 0, 0, 1, 50, 100);
}

以上代码可以直接应用到HTML元素上，例如：




<div class="transformed">Transformed Element</div>

并且在CSS中定义.transformed类：




.transformed {
  transform: translate(50px, 100px) rotate(30deg) scale(1.5, 0.8) skew(30deg, 20deg);
}

这将会先移动、旋转、缩放和倾斜元素。