資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告