transform属性2D转换用法详细介绍

让你五行代码

已于 2023-04-10 14:51:54 修改

阅读量1.3k

点赞数 2

文章标签： css3 css web前端

于 2023-04-10 14:49:54 首次发布

本文链接：https://blog.csdn.net/zy1992As/article/details/130059784

版权

接触过web前端的同学们应该比较了解，CSS3中的变形允许动态的控制元素，可以在网页中对元素进行移动、缩放、倾斜、旋转，或结合这些变形属性产生复杂的动画。通过CSS3中的变形操作，可以让元素生成静态视觉效果，也可以结合过渡和动画属性产生一些新的动画效果。

CSS3的变形(transform)属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform属性的基本语法如下。

transform: none | transform-functions;

在上面的语法格式中，transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

transform-function函数包括matrix()、translate()、scale()、rotate()和skew()等。具体说明如下。

● matrix()：定义矩形变换，即基于 X和Y 坐标重新定位元素的位置。

● translate()：移动元素对象，即基于 X和Y 坐标重新定位元素。

● scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。

● rotate()：旋转元素对象，取值为一个度数值。

● skew()：倾斜元素对象，取值为一个度数值。

2D转换

在CSS3中，使用transform属性可以实现变形效果，主要包括4种变形效果，分别是：平移、缩放、倾斜和旋转。下面，将分别针对这些变形效果进行讲解。

1.平移

使用translate()方法能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义X轴和Y轴坐标，其基本语法格式如下。

transform: translate(x-value, y-value);

在上述语法中，x-value 指元素在水平方向上移动的距离，y-value 指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。

在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动，效果如图9-5所示。在该图中，实线表示平移前的元素，虚线表示平移后的元素。

下面通过一个案例来演示translate()方法的使用用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素平移</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #