数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS3 变换背景图片
HTML 指的是超文本标记语言。它是一种创建网页的工具，也是网页构建方式的示例。它由多个部分组成。其组件向浏览器提供有关如何呈现内容的指令。CSS（层叠样式表）控制 HTML 组件在不同印刷和数字媒体（如显示器和其他印刷和数字形式）中的外观。
使用 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 中提供的各种变换：
属性 |
它执行的功能 |
|---|---|
无 |
没有变换。 |
matrix(x, x, x, x, x, x) |
它描述一个 2D 矩阵变换。它接受六个值。 |
matrix3d(x, x, x, x, x, x, x, x, x) |
它描述一个 3D 矩阵变换。需要 9 个值。 |
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) |
它描述元素的透视。考虑 perspective 属性。 |
初始 |
元素初始化为其默认值。 |
继承 |
它从其父元素继承值。 |
语法
.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://tutorialspoint.com/images/test.png" class="child" />
</div>
</div>
</body>
</html>
让我们了解旋转的 HTML 代码 -
我们将在页面主体内部使用两个 div。
第一个 div 被赋予 parent 类。
我们将应用 15% 的 margin-top 和 10% 的 margin-left。
第二个 div 用于包含显示变换的图像，并被赋予 child 类。
我们将 transform: rotate(50deg) 应用于 child 类。
示例
使用 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://tutorialspoint.com/images/test.png" class="child" />
</div>
</div>
</body>
</html>
让我们了解缩放的 HTML 代码 -
我们将在页面主体内部使用两个 div。
第一个 div 被赋予 parent 类。
我们将应用 15% 的 margin-top 和 10% 的 margin-left。
第二个 div 用于包含显示变换的图像，并被赋予 child 类。
我们将 transform: scale(2.0) 应用于 child 类。
示例
使用缩放的 transform 后的 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://tutorialspoint.com/images/logo.png" class="child" />
</div>
</div>
</body>
</html>
让我们了解倾斜的 HTML 代码 -
我们将在页面主体内部使用两个 div。
第一个 div 被赋予 parent 类。
我们将应用 15% 的 margin-top 和 10% 的 margin-left。
第二个 div 用于包含显示变换的图像，并被赋予 child 类。
我们将 transform: skew(20deg) 应用于 child 类。
示例
使用倾斜的 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://tutorialspoint.com/images/logo.png" class="child" />
</div>
</div>
</body>
</html>
结论
在本文中，我们首先学习了 HTML 和 CSS，然后我们查看了 transform 及其所有属性。然后我们使用它编写了一个程序来变换背景图片。
2K+ 次浏览
