在 css 中应用多个转换-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > 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);

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

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

示例代码：

html>
<html>
    <head>
        <title>title of the documenttitle>
        <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 转换。

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

示例代码：

html>
<html>
    <head>
        <title>title of the documenttitle>
        <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>

输出:

使用嵌套类的 css 多重转换

总结

我们很高兴地通知您，您可以对 css 中的元素应用多个转换。您可以让一个 div 同时旋转和平移，甚至可以让一个元素在不同的方向上旋转和平移。

转换是在 html 元素上创建视觉效果的强大工具。 css 支持多种变换，允许更大范围的效果。

当一起使用时，变换可以创建一些真正令人惊叹的视觉效果。

上一篇：使用 css 样式化输入和提交按钮

下一篇：使用 css 将导航栏居中

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

发布时间：2023/04/28 浏览次数：133 分类：css

本文介绍的是著名的 css ui 框架 bootstrap。我们将讨论使用自定义样式覆盖 bootstrap css 的过程。

使用 css 制作带圆角的 html 表格

发布时间：2023/04/28 浏览次数：245 分类：css

这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

css 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：140 分类：css

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

发布时间：2023/04/28 浏览次数：265 分类：css

在本文中，用户将学习仅使用 css 将

使用 css 居中内联块

发布时间：2023/04/28 浏览次数：118 分类：css

在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 css 添加透明边框

发布时间：2023/04/28 浏览次数：525 分类：css

在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

发布时间：2023/04/28 浏览次数：704 分类：css

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

发布时间：2023/04/28 浏览次数：233 分类：css

本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。

css 防止文本选择

发布时间：2023/04/28 浏览次数：81 分类：css

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 web 浏览器使用该属性。

在 css 中应用多个转换-ag捕鱼王app官网