如何使用 CSS3 转换背景图像

HTML 是超文本标记语言 (Hyper Text Markup Language) 的缩写。它既是构建网页的工具，也是网页结构图的说明。它由多个部分组成。其组件为浏览器提供如何渲染内容的指令。HTML 组件在不同印刷和数字媒体(例如显示器和其他印刷和数字形式)中的外观由 CSS(层叠样式表)控制。

使用 CSS 可以显著缩短开发时间。它支持同时控制多个网页设计。在本文中，我们将探讨如何使用 CSS3 转换背景图像。

基本 HTML 文档

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

CSS Transform 属性

要对元素执行二维或三维变换，请使用 CSS transform 属性。可以使用 transform 属性对元素进行旋转、缩放和倾斜。

可以使用 CSS 中的 transform 属性更改视觉格式化模型的坐标空间。该属性可用于为元素添加效果，例如倾斜、旋转、平移等。

语法

transform: none|transform-functions|initial|inherit;

以下是 CSS 中可用的各种变换 –

语法

.class_name { transform: value };

为防止重叠效果，请使用 transform 属性将 overflow: hidden 添加到父组件。未经转换的 HTML 代码 −

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>transform</title>
</head>
<body>
   <div class="parent">
      <div>
         <img src="https://www.cainiaomax.com/images/test.png" class="child" />
      </div>
   </div>
</body>
</html>

让我们来理解一下旋转的 HTML 代码 -

• 我们将在页面主体中使用两个 div。

• 第一个 div 被赋予了 parent 的 class。

• 我们将应用 15% 的上边距和 10% 的左边距。

• 第二个 div 用于包含表示 transform 的图片，并被赋予了 child 的 class。

• 我们将对 child 的 class 应用 transform: rotate(50deb)。

示例

使用 transform 后的 HTML 代码 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>transform</title>
   <style>
      div.parent {
         margin-top: 15%;
         margin-left: 10%;
      }
      .child {
         transform: rotate(50deg);
      }
   </style>
</head>
<body>
   <div class="parent">
      <div>
         <img src="https://www.cainiaomax.com/images/test.png" class="child" />
      </div>
   </div>
</body>
</html>

让我们来理解一下缩放的 HTML 代码 -

• 我们将在页面主体中使用两个 div。

• 第一个 div 被赋予了 parent 的 class。

• 我们将应用 15% 的上边距和 10% 的左边距。

• 第二个 div 用于包含表示 transform 的图片，并被赋予了 child 的 class。

• 我们将对 child 的 class 应用 transform: scale(2.0)。

示例

使用 transform 和 scale 后的 HTML 代码 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>transform</title>
   <style>
      div.parent {
         margin-top: 15%;
         margin-left: 10%;
      }
      .child {
         transform: scaleY(2.0);
      }
   </style>
</head>
<body>
   <div class="parent">
      <div>
         <img src="https://www.cainiaomax.com/images/logo.png" class="child" />
      </div>
   </div>
</body>
</html>

让我们来理解倾斜的 HTML 代码 -

• 我们将在页面主体中使用两个 div。

• 第一个 div 被赋予了 parent 的 class。

• 我们将应用 15% 的上边距和 10% 的左边距。

• 第二个 div 用于包含表示 transform 的图片，并被赋予了 child 的 class。

• 我们将对 child 的 class 应用 transform: skew(20deg)。

示例

使用倾斜 transform 后的 HTML 代码 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>transform</title>
   <style>
      div.parent {
         margin-top: 15%;
         margin-left: 10%;
      }
      .child {
         transform: skewY(20deg);
      }
   </style>
</head>
<body>
   <div class="parent">
      <div>
         <img src="https://www.cainiaomax.com/images/logo.png" class="child" />
      </div>
   </div>
</body>
</html>

结论

在本文中，我们首先学习了 HTML 和 CSS，然后研究了 transform 及其所有属性。最后，我们用它编写了一个程序来变换背景图像。

相关文章

• 使用 CSS Animation 为 transform 属性添加动画
• CSS word-spacing 属性动画
• CSS width 属性动画
• CSS outline-color 动画
• CSS text-decoration-color 属性动画
• 在 CSS perspective-origin 属性上执行动画
• CSS text-shadow 属性动画
• CSS text-indent 属性动画
• CSS top 属性动画
• CSS outline-offset 属性动画

有用资源

• css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/