CSS3 2D 转换学习笔记

CSS3 允许开发人员通过矩阵变换的方式对元素进行 2D 或 3D 变换。本篇学习笔记将介绍 CSS3 中的 2D 转换。

1. 2D 转换

1.1 translate() 方法

translate() 方法允许我们按照指定的 X 轴和 Y 轴偏移量移动元素。该方法接收两个参数，第一个参数为水平方向的偏移量，第二个参数为垂直方向的偏移量。示例如下：

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

该样式规则会将 div 标签向右移动 50 像素，向下移动 100 像素。

1.2 rotate() 方法

rotate() 方法可以实现元素的旋转。该方法接收一个参数，表示要旋转的角度。正值表示顺时针旋转，负值表示逆时针旋转。示例如下：

cssCopy Code
div {
    transform: rotate(45deg);
}

该样式规则会将 div 标签逆时针旋转 45 度。

1.3 scale() 方法

scale() 方法允许我们按照指定的比例缩放元素。该方法接收两个参数，分别表示水平方向和垂直方向的缩放比例。示例如下：

cssCopy Code
div {
    transform: scale(2, 0.5);
}

该样式规则会将 div 标签在水平方向上放大两倍，在垂直方向上缩小一半。

1.4 skew() 方法

skew() 方法可以实现元素的倾斜。该方法接收两个参数，分别表示水平方向和垂直方向的倾斜角度。示例如下：

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

该样式规则会将 div 标签在水平方向上向右倾斜 30 度，在垂直方向上向上倾斜 20 度。

2. 实例

下面是一个实例，将一个简单的 div 标签进行各种 2D 转换：

cssCopy Code
div {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin: 50px;
    transform: translate(50px, 100px) rotate(45deg) scale(1.5, 1.5) skew(30deg, 0);
}

该样式规则会将 div 标签先向右移动 50 像素、向下移动 100 像素，然后逆时针旋转 45 度，再在水平方向和垂直方向上都放大 1.5 倍，最后在水平方向上向右倾斜 30 度。

以上就是本篇学习笔记的全部内容，希望对大家学习 CSS3 2D 转换有所帮助。