数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法学研究如何使用 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+ 浏览量
广告