在 CSS 中应用多重变换的方法有很多种。
在这个片段中，我们将演示如何使用 transform 属性的多个值以及使用嵌套类来实现这一点。
在下面的示例中，我们将使用 transform 属性的多个值。
可以添加一个接一个应用的多个值。
这些值必须用空格分隔。
transform 属性应用最右边的值，然后应用左边的值。
换句话说，将首先应用列表的最后一个值。
这就是为什么更改值顺序会影响最终结果的原因。
让我们看看如何一步一步地应用它。
添加 CSS
- 使用加载的图像作为背景属性并指定宽度、高度和边框属性。
- 添加具有两个值的变换属性：旋转和平移。
body {
margin: 10px;
}
.box {
background: url("coffee.png") no-repeat;
background-size: cover;
height: 90px;
width: 300px;
border: 2px solid #000000;
transform: rotate(90deg) translate(150px, -230px);
}
h1 {
color: #000000;
}
应用多个变换值的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
margin: 10px;
}
.box {
background: url("https://onitroad.com/coffee.png") no-repeat;
background-size: cover;
height: 90px;
width: 300px;
border: 2px solid #000000;
transform: rotate(110deg) translate(150px, -230px);
}
h1 {
color: #000000;
}
</style>
</head>
<body>
<h1>
onitroad
</h1>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
<div class="box"></div>
</body>
</html>
在上面提到的例子中，我们在加载的图像上应用了变换属性。
“rotate”值旋转图像，“translate”移动图像。
让我们看看如何使用嵌套类获得相同的效果。
在这种情况下，我们需要将具有指定变换的一个元素与具有另一个变换的另一个元素嵌套在一起。
要应用多个转换，可以使用多个元素嵌套来重复此操作。
首先将应用于嵌套元素的父级。
然后，接下来将应用每个子元素的变换。
使用嵌套类应用多个转换的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
color: #000000;
}
.outer-transform {
transform: translate(150px, 180px);
}
.inner-transform {
background: url("https://onitroad.com/coffee.png") no-repeat;
background-size: cover;
height: 100px;
width: 400px;
border: 2px solid #000000;
transform: rotate(-150deg);
}
</style>
</head>
<body>
<h1>
onitroad
</h1>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
<div class="outer-transform">
<div class="inner-transform"></div>
</div>
</body>
</html>
其中我们对内部元素应用了rotate() 变换，对外部元素应用了translate() 变换。
创建 HTML
- 分别使用 <h1> 和 <strong> 标签作为标题和粗体内容。
- 添加一个类名为“box”的 <div>。
<h1> onitroad </h1> 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。 经历过风雨，才懂得阳光的温暖。 <div class="box"></div>
日期：2020-06-02 22:14:57 来源：oir作者：oir