〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

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

在CSS中，2D变形是通过transform属性来实现的。这个属性可以应用多种变换函数，比如旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等。

以下是一些使用2D变形的例子：




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




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




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




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

你可以将这些变形函数组合使用，以创建更复杂的变形效果：




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

这个例子先旋转、再缩放、然后移动、最后倾斜元素。每个变形都是基于前一个变形的结果来进行的。