資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法學研究如何使用 CSS 將多個 transform 屬性應用於元素？
要使用CSS將多個transform屬性應用於元素，我們將使用兩種不同的方法，這兩種方法都使用transform屬性。在第一種方法中，我們將使用transform屬性的兩個函式，而在第二種方法中，我們將使用巢狀類來應用不同的轉換。
在這篇文章中，我們有一個帶有背景影像的容器，我們的任務是使用CSS將多個transform屬性應用於元素。
向元素應用多個轉換的方法
應用多個轉換值
要使用 CSS 將多個 transform 屬性應用於元素，我們將使用 rotate() 和 scale() transform 屬性的函式。它旋轉並應用容器的縮放。
- 我們使用了 **container** 類來使用 CSS height 和 width 屬性建立框以設定其尺寸，添加了 border 並使用 margin-left 和 margin-top 屬性設定其左和上邊距。
- 我們使用 CSS background-image 屬性設定容器的背景影像，使用 background-repeat 停用其重複，設定尺寸並應用 transition 以實現容器的平滑旋轉。
- 然後，我們使用 **"transform: rotate(45deg) scale(1.2);"** 使用 hover偽類 在懸停時旋轉和縮放影像。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 **rotate()** 和 **scale()** 函式將多個 transform 屬性應用於元素。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 150px;
}
.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) scale(1.2);
}
</style>
</head>
<body>
<h3>
To Apply Multiple Transform Property
to an Element Using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate()</strong> and <strong>
scale()</strong> method to apply multiple
transformation to an element using CSS.
</p>
<div class="container image"></div>
</body>
</html>
使用類巢狀應用多個轉換
在這種方法中，為了使用 CSS 將多個轉換應用於元素，我們使用 transform 屬性的 translate()、rotate() 和 scale() 函式。這裡首先應用旋轉和轉換轉換，然後應用縮放轉換。
- 我們使用 **container** 類建立一個容器併為容器設定背景影像。
- 然後，我們使用 **first** 類來設定應用 **旋轉** 和 **轉換** 轉換，它將容器旋轉 -5 度，並在 x 方向平移 200 畫素，在 y 方向平移 50 畫素。
- 最後，我們使用了 **second** 類，它將 **縮放** 轉換應用於容器。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 **rotate()**、**translate()** 和 **scale()** 函式將多個 transform 屬性應用於元素。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 1px solid black;
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
}
.first {
transform: rotate(-5deg) translate(200px, 50px);
}
.second {
border: 1px solid black;
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transform: scale(1.5);
}
</style>
</head>
<body>
<h3>
To Apply Multiple Transform Property
to an Element Using CSS
</h3>
<p>
In this example we have used transform
<strong>translate() and rotate()</strong>
method on first class and <strong>scale()
</strong> method to apply multiple
transformation to an element using CSS.
</p>
<h4>Before: </h4>
<div class="container"></div>
<h4>After Multiple Transformation: </h4>
<div class="first">
<div class="second"></div>
</div>
</body>
</html>
結論
為了使用 CSS 將多個 transform 屬性應用於元素，我們瞭解了兩種不同的方法。在第一種方法中，我們使用 transform 屬性的兩個值來應用多個轉換，而在第二種方法中，我們使用了 div 類的巢狀來逐個應用轉換。
更新於：2024年9月4日
5K+ 瀏覽量
廣告