数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 CSS 旋转容器背景图片？
使用 CSS 旋转容器背景图片是一个强大的工具，可以控制和增强网站的视觉呈现。在本文中，我们将了解三种不同的方法来使用 CSS 旋转容器背景图片。
我们有一个在 div 容器中的背景图片，我们的任务是使用 CSS 旋转容器背景图片。
使用 CSS 旋转容器背景图片的方法
以下列出了我们将在这篇文章中讨论的使用 CSS 旋转容器背景图片的方法，包括分步骤的解释和完整的示例代码。
使用 rotate() 函数旋转
为了使用 CSS 旋转容器背景图片，我们将使用 rotate() transform 属性的函数。它围绕二维表面上的固定点旋转任何元素。
- 我们使用 **container** 类使用 CSS height 和 width 属性创建一个盒子来设置其尺寸，添加一个 border 并使用 margin-left 和 margin-top 属性设置其左和上边距。
- 我们使用 CSS background-image 属性设置容器的背景图片，使用 background-repeat 禁用其重复，设置尺寸并应用 transition 以实现容器平滑旋转。
- 然后，我们使用 **"transform: rotate(45deg);"** 在悬停时使用 hover 伪类 将图像旋转 45 度。
示例
这是一个完整的示例代码，实现了上述步骤，使用 **rotate()** 函数旋转容器背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate()</strong> method to
rotate an image using CSS. Hover over
image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
使用 matrix() 函数旋转
在这种方法中，我们将使用 matrix() transform 属性的函数，它创建一个齐次二维变换矩阵，其中前四个参数指定线性变换，后两个参数分别指定 x 和 y 轴上的 平移。
- 在这种方法中，前两个步骤与第一种方法相同，用于创建盒子并为该盒子设置背景图片。
- 然后，我们使用 **"transform: matrix();"** 在悬停时使用 hover 伪类旋转 div 元素。
示例
这是一个完整的示例代码，实现了上述步骤，使用 **matrix()** 函数旋转容器背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>matrix()</strong> method to
rotate the background-image using CSS.
Hover over image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
使用 rotate3d() 函数旋转
在这种使用 CSS 旋转容器背景图片的方法中，我们将使用 rotate3d() 函数，该函数围绕三维表面上的固定轴旋转元素。
- 在这种方法中，前两个步骤与第一种方法相同，用于创建盒子并为该盒子设置背景图片。
- 然后，我们使用 **"transform: rotate3d(2, 1.8, 1, 45deg);"** 在悬停时使用 hover 伪类将 div 元素旋转 45 度。
示例
这是一个完整的示例代码，实现了上述步骤，使用 **rotate3d()** 函数旋转容器背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: rotate3d(2, 1.8, 1, 45deg);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate3d()</strong> method to
rotate the background-image using CSS.
Hover over image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 旋转容器背景图片。我们讨论了三种旋转容器背景图片的方法：使用 **rotate()** 函数、使用 **matrix()** 函数和使用 **rotate3d()** 函数。在这三种方法中，**rotate()** 函数最常用于旋转，但您可以根据需要使用任何方法。
更新于：2024年9月4日
8K+ 次浏览
广告