在 CSS 中应用多个转换

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

在 CSS 中应用多个转换

作者：迹忆客最近更新：2023/04/27 浏览次数：

CSS 变换是一种向元素添加动画效果的强大但未被充分利用的方法。但是，当一次应用多个转换时，要获得所需的结果可能会很棘手；例如，我们希望元素在元素重叠时同步变换。

本文将探讨如何在 CSS 中应用多个转换。

通过在 CSS 中指定多个转换值来应用多个转换

有很多方法可以使用多个 CSS 转换。我们将在以下部分讨论它们。

应用多个 CSS 转换的一种方法是使用速记转换属性。此属性可以采用多个值，以空格分隔。

例如：

transform: rotate(45deg) scale(2);

这条线会将元素旋转 45 度，然后将其大小加倍。

另一个例子是，如果你想将一个元素旋转 30 度，然后将其平移 50 像素，你可以使用以下代码：

transform: rotate(30deg) translate(50px);

这条线可以成为创建复杂动画和交互的有价值的技术。

现在让我们看一些多重变换的例子。您可以使用以下代码来转换图像。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            body {
                margin: 10px;
            }
            .box {
                background: url("/img/DelftStack/logo.png")
                    no-repeat;
                background-size: cover;
                height: 100px;
                width: 600px;
                border: 2px solid #000000;
                transform: rotate(110deg) translate(45px, -160px);
            }
            h1 {
                color: #000000;
            }
        </style>
    </head>
    <body>
        <h1>
            CSS Multiple transforms
        </h1>
        <strong>
            How to apply multiple transforms in CSS?
        </strong>
        <div class="box"></div>
    </body>
</html>

在上面的代码中，我们使用了 CSS 函数 transform: rotate(110deg) translate(45px, -160px) 来对图像进行变换。此 CSS 代码会将图像旋转 110 度。

所以通过使用上面的代码，你可以应用它来转换任何图像。

通过在 CSS 中指定多个变换来应用多个变换

使用多个转换的另一种方法是单独指定每个转换。

例如：

transform: rotate(45deg);

transform: scale(2);

通过在 CSS 中指定多个变换原点来应用多个变换

您还可以利用 transform-origin 属性更改转换的原点。例如：

transform-origin: 50% 50%;

transform-origin: bottom right;

这会将原点更改为元素的中心或组件的右下角。

在 CSS 中使用嵌套类应用多个转换

还有另一种应用 CSS 转换的方法。下面是一个 CSS 代码，但是我们将创建两个嵌套类，outer-transform 和 inner-transform，以应用多个 CSS 转换。

这段代码也会给出我们想要的输出。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            h1 {
                color: #000000;
            }
            .outer-transform {
                transform: translate(150px, 180px);
            }
            .inner-transform {
                background: url("/img/DelftStack/logo.png")
                    no-repeat;
                background-size: cover;
                height: 100px;
                width: 600px;
                border: 2px solid #000000;
                transform: rotate(-150deg);
            }
        </style>
    </head>
    <body>
        <h1>
            CSS multiple transforms
        </h1>
        <strong>
            How to apply multiple transforms in CSS?
        </strong>
        <div class="outer-transform">
            <div class="inner-transform"></div>
        </div>
    </body>
</html>