CSS 中的 2D 变换函数

2d 变换函数用于对元素应用 2d 变换,可以旋转、移动、缩放和倾斜。

翻译 – 沿 x 和 y 轴移动元素。

缩放 – 在 x y 方向调整元素大小。

旋转 – 将元素移动一定程度。

倾斜 -沿 x y 方向倾斜元素。

立即学习“前端免费学习笔记(深入)”;

以下是显示 CSS 中的 2D 变换函数的代码 –

示例

现场演示

body {   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;}div {   width: 100px;   height: 100px;   background-color: rgb(255, 0, 128);   border:2px solid rgb(0, 35, 150);   margin: 20px;   display: inline-block;   color: white;}.rotate {   transform: rotate(20deg);}.translate {   transform: translate(30px, 20px);}.scale {   transform: scale(2, 1);   margin-left:70px;}.skew {   transform: skew(20deg);}

2D transform functions example

ROTATE()
SKEW()
SCALE()
TRANSLATE()

登录后复制

输出

上面的代码将产生以下输出 –

CSS 中的 2D 变换函数

以上就是CSS 中的 2D 变换函数的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2864076.html

(0)
上一篇 2025年3月10日 17:24:27
下一篇 2025年3月10日 17:24:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 使用HTML和CSS创建水平滚动捕捉

    To create a horizontal scroll snap, we will make use of the scroll−snap−type to produce the snap effect. The properties …

    2025年3月10日
    000
  • CSS 语音媒体属性之前的休息

    CSS rest-after 属性对于语音媒体在元素之前设置暂停很有用。 让我们看一个 rest-before 语音媒体属性的示例 h1 {   rest-before: 15ms;} 登录后复制 时间以毫秒为单位设置暂停。 以上就是CSS…

    2025年3月10日
    200
  • 如何在 CSS 中使用 font-optical-sizing 属性?

    在学习如何使用font-optical-sizing属性之前,我们首先要看一下CSS中的font属性以及为什么需要将font-optical-sizing作为一个单独的属性。 网页上文本的样式由CSS中的font属性控制,它是许多其他属性的…

    2025年3月10日
    200
  • 十大 Tailwind CSS 插件

    在本教程中,我们将看到排名前 10 位的 tailwind CSS 插件。插件是支持定制的软件组件。它添加了特定的功能来定制程序。它可以编辑和修改程序的字体、颜色和背景。借助 CSS 和 html,可以制作简单且用户友好的网页。 CSS 具…

    2025年3月10日
    200
  • 使用 CSS 创建工具提示

    当用户将鼠标光标移动到文本上时,工具提示可见。您可以在其中添加信息以方便用户理解。 示例 您可以尝试运行以下代码来了解如何创建工具提示 – 现场演示     #mytooltip #mytext { visibility: hi…

    2025年3月10日
    200
  • 使用 CSS 进行维护

    CSS 被广泛称为级联样式表,用于设置使用 HTML 标签创建的元素的样式,并负责网页的外观和感觉。我们可以使用 CSS 来更改文本的颜色、更改背景、添加任何图像或在文本之间留出空间。我们可以创建多种方式来显示单个内容。 在本文中,我们将解…

    2025年3月10日
    200
  • 如何使用CSS创建渐变阴影?

    随着网络的不断发展,制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。 渐变阴影可用于吸引用户对特定信息的注意力,应用悬停…

    2025年3月10日
    200
  • 设置动画应使用 CSS 运行多少次

    使用 animation-iteration-count 属性设置动画应使用 CSS 运行的次数。 以下内容示例将动画计数设置为 2: 示例 现场演示          div { width: 150px; height: 200px; …

    2025年3月10日
    200
  • CSS 动画延迟属性

    使用animation-delay属性通过CSS设置动画开始的延迟。 您可以尝试运行以下代码来实现animation-delay 属性 – 示例 现场演示          div { width: 150px; height:…

    2025年3月10日
    200
  • 如何使用 jQuery 添加和删除 CSS 类到元素?

    CSS 类在网页设计中发挥着关键作用,并对网页的综合外观产生重大影响。由于页面的美观越来越受到重视,动态定制网页可以极大地提高其价值。乍一看,这个任务可能看起来很吓人,但是利用 jQuery,可以毫不费力地从 HTML 组件中实时附加或提取…

    2025年3月10日
    200

发表回复

登录后才能评论