css 2D转换

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

CSS的2D转换功能使得页面上的元素可以进行移动、旋转、缩放和倾斜等操作。2D转换常用的CSS属性包括transform。

以下是一些使用CSS 2D转换的例子：




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




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




.element {
  transform: scale(1.5, 2);
}




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

你可以通过组合这些基本的转换函数，来实现更复杂的效果。同时，你还可以通过transform-origin属性来改变转换的原点，默认是元素的中心点。




.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

以上代码将元素的左上角设置为转换的原点，然后元素绕此点旋转45度。