〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形
在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);
}这个例子先旋转、再缩放、然后移动、最后倾斜元素。每个变形都是基于前一个变形的结果来进行的。
评论已关闭