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属性可以对一个元素进行旋转、缩放和倾斜。

视觉格式化模型的坐标空间可以用CSS中的变换属性来改变。这被用来给元素添加效果，如倾斜、旋转、平移等。

语法

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

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

属性	它所执行的功能
None	没有变换。
matrix(x, x, x, x, x, x)	它详细说明了一个2-D类型的矩阵变换。它接受六个值。
matrix3d(x, x , x, x, x, x, x, x, x)	它描述了一个3-D类型的矩阵变换。需要9个值。
translate(x, y)	X轴和Y轴按照规范进行平移。
translate3d(x, y, z)	它指定了一个X、Y和Z轴的平移。
translate X(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 };

为了防止重叠的效果，请在父组件上添加overflow: 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代码：

我们将在页面的主体中使用两个div。
第一个div被赋予一个parent的类。
我们将应用15%的上边距和10%的左边距。
第二个div用来包含图片，上面写着transform，并被赋予一个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%的上边距和10%的左边距。
第二个div用来包含图片，它说的是transform，并被赋予一个child类。
我们将对子类应用 transform: scale(2.0) 。

例子

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

让我们了解一下倾斜的HTML代码：

我们将在页面的主体中使用两个div。
第一个div被赋予一个parent的类。
我们将应用15%的上边距和10%的左边距。
第二个DIV用来包含图片，上面写着transform，并被赋予一个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>