如何使用 CSS 将多个 transform 属性应用于元素？

要使用CSS将多个transform属性应用于元素，我们将使用两种不同的方法，这两种方法都使用transform属性。在第一种方法中，我们将使用transform属性的两个函数，而在第二种方法中，我们将使用嵌套类来应用不同的转换。

在这篇文章中，我们有一个带有背景图像的容器，我们的任务是使用CSS将多个transform属性应用于元素。

向元素应用多个转换的方法

应用多个转换值

要使用 CSS 将多个 transform 属性应用于元素，我们将使用 rotate() 和 scale() transform 属性的函数。它旋转并应用容器的缩放。

  • 我们使用了 **container** 类来使用 CSS height 和 width 属性创建框以设置其尺寸，添加了 border 并使用 margin-left 和 margin-top 属性设置其左和上边距。
  • 我们使用 CSS background-image 属性设置容器的背景图像，使用 background-repeat 禁用其重复，设置尺寸并应用 transition 以实现容器的平滑旋转。
  • 然后，我们使用 **"transform: rotate(45deg) scale(1.2);"** 使用 hover伪类 在悬停时旋转和缩放图像。

示例

这是一个完整的示例代码，实现了上述步骤，使用 **rotate()** 和 **scale()** 函数将多个 transform 属性应用于元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            height: 100px;
            width: 300px;
            border: 1px solid black;
            margin-left: 80px;
            margin-top: 150px;
        }
        .image {
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
            transition: transform 0.5s ease;
        }        
        .image:hover{
            transform: rotate(45deg) scale(1.2);
        }
    </style>
</head>
<body>
    <h3>
        To Apply Multiple Transform Property 
        to an Element Using CSS
    </h3>
    <p>
        In this example we have used transform
        <strong>rotate()</strong> and <strong>
        scale()</strong> method to apply multiple 
        transformation to an element using CSS.
    </p>
    <div class="container image"></div>
</body>
</html>

使用类嵌套应用多个转换

在这种方法中，为了使用 CSS 将多个转换应用于元素，我们使用 transform 属性的 translate()、rotate() 和 scale() 函数。这里首先应用旋转和转换转换，然后应用缩放转换。

  • 我们使用 **container** 类创建一个容器并为容器设置背景图像。
  • 然后，我们使用 **first** 类来设置应用 **旋转** 和 **转换** 转换，它将容器旋转 -5 度，并在 x 方向平移 200 像素，在 y 方向平移 50 像素。
  • 最后，我们使用了 **second** 类，它将 **缩放** 转换应用于容器。

示例

这是一个完整的示例代码，实现了上述步骤，使用 **rotate()**、**translate()** 和 **scale()** 函数将多个 transform 属性应用于元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            border: 1px solid black;
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
        }
        .first {
            transform: rotate(-5deg) translate(200px, 50px);
        }
        .second {
            border: 1px solid black;
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
            transform: scale(1.5);
        }  
    </style>
</head>
<body>
    <h3>
        To Apply Multiple Transform Property 
        to an Element Using CSS
    </h3>
    <p>
        In this example we have used transform
        <strong>translate() and rotate()</strong>  
        method on first class and <strong>scale()
        </strong> method to apply multiple 
        transformation to an element using CSS.
    </p>
    <h4>Before: </h4>
    <div class="container"></div>
    <h4>After Multiple Transformation: </h4>
    <div class="first">
        <div class="second"></div>
    </div>
</body>
</html>

结论

为了使用 CSS 将多个 transform 属性应用于元素，我们了解了两种不同的方法。在第一种方法中，我们使用 transform 属性的两个值来应用多个转换，而在第二种方法中，我们使用了 div 类的嵌套来逐个应用转换。

更新于：2024年9月4日

5K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告