資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/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.tw/images/logo.png" class="child" />
</div>
</div>
</body>
</html>
結論
在本文中，我們首先學習了 HTML 和 CSS，然後我們查看了 transform 及其所有屬性。然後我們使用它編寫了一個程式來變換背景圖片。
2K+ 次瀏覽
