如何使用CSS3转换背景图像

HTML代表超文本标记语言。它用作构建网页的工具，也是如何组成网页的示例。它由多个部分组成。它的组件为浏览器提供了渲染内容的指示。控制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变换属性

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

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

语法

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

以下是CSS中可用的各种转换：

属性	所执行的功能
None	没有任何变换。
matrix(x, x, x, x, x, x)	它详细描述了2D类型的矩阵变换，需要六个值。
matrix3d(x, x, x, x, x, x, x, x, x)	它描述了一个3D类型的矩阵变换，需要九个值。
translate(x, y)	根据指定进行X轴和Y轴的平移。
translate3d(x, y, z)	指定X轴、Y轴和Z轴的平移。
translateX(x)	只指定沿X轴的平移。
translateY(y)	只指定沿Y轴的平移。
translateZ(z)	只指定沿Z轴的平移。
rotate(angle)	它详细描述了旋转角度。
rotateX(angle)	它定义了与旋转角度相对应的旋转和X轴。
rotateY(angle)	它定义了与旋转角度相对应的旋转和Y轴。
rotateZ(angle)	它定义了与旋转角度相对应的旋转和Z轴。
scale(x, y)	指定沿 X 和 Y 轴的缩放变换。
scale3d(x, y, z)	指定沿 X 和 Y 轴的缩放变换。
scaleX(x)	定义 X 轴的缩放变换。
scaleY(y)	定义 Y 轴的缩放变换。
scaleZ(z)	定义 Z 轴的缩放变换。
scale3d(x, y, z)	指定沿 X、Y 和 Z 轴的缩放变换。
skew(angle, angle)	指定与斜角相对应的沿X轴和Y轴的倾斜变换。
skewX(angle)	描述与倾斜角度相对应的沿X轴的倾斜变换。
skewY(angle)	描述与倾斜角度相对应的沿Y轴的倾斜变换。
SkewZ(angle)	描述与倾斜角度相对应的沿Z轴的倾斜变换。
perspective(x)	描述元素的透视。考虑透视属性。
initial	元素初始化为其默认值。
inherit	其父元素的值被继承。

语法

.class_name { transform: value };

为了防止重叠效果，请在具有transform属性的父组件中添加溢出： hidden 。没有变换的HTML代码 –

示例

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

让我们了解旋转的HTML代码 –

我们将在页面的body内使用两个div。
第一个div赋予了一个parent类。
我们将应用15%的margin-top和10%的margin-left。
第二个div用于包含显示“transform”的图像，并且赋予了一个child类。
我们将在child类中应用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.tutorialspoint.com/images/test.png" class="child" />
      </div>
   </div>
</body>
</html>

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

我们将在页面的正文中使用两个div。
第一个div被赋予一个类名为parent。
我们将应用15%的margin-top和10%的margin-left。
而第二个div用于包含写有“transform”的图像，并被赋予一个类名child。
我们将对类名为child的div应用transform：scale(2.0)。

示例

使用缩放变换的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.tutorialspoint.com/images/logo.png" class="child" />
      </div>
   </div>
</body>
</html>

让我们来了解“skew”的HTML代码-

我们将在页面的body内使用两个div。
第一个div被赋予parent类。
我们将应用margin-top为15%和margin-left为10%。
第二个div用于容纳带有“transform”标识的图片，被赋予child类。
我们将对child类应用transform: skew(20deg)。

示例

使用skew转换后的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.tutorialspoint.com/images/logo.png" class="child" />
      </div>
   </div>
</body>
</html>