3.1 Fondamenti delle trasformazioni combinate
CSS offre la possibilità di combinare più trasformazioni per creare effetti visivi complessi.
Queste trasformazioni possono includere translate, rotate, scale e skew,
che possono essere unite in una singola proprietà transform.
La proprietà transform può contenere diverse funzioni di trasformazione separate da spazi. Verranno applicate
in sequenza, nell'ordine in cui sono specificate. Comprendere come le diverse trasformazioni interagiscono tra loro
è la chiave per creare animazioni ed effetti complessi.
Sintassi:
element {
transform: function1() function2() ... functionN();
}
Esempio:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Traslazione e rotazione
In questo esempio, l'elemento si sposta di 50 pixel a destra e di 50 pixel in basso, poi ruota di 45 gradi.
Esempio:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traslazione e rotazione</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: l'elemento viene prima spostato di 50 pixel a destra e in basso, poi ruotato di 45 gradi in senso orario
3.2 Analisi delle diverse combinazioni
1. Scala e inclinazione
In questo esempio, l'elemento viene ingrandito di 1.5 volte su entrambi gli assi, poi inclinato di 20 gradi sull'asse X e di 10 gradi sull'asse Y.
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scala e inclinazione</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: l'elemento viene prima ingrandito di 1.5 volte su entrambi gli assi, poi inclinato di 20 gradi sull'asse X e di 10 gradi sull'asse Y
2. Traslazione, rotazione e scala
In questo esempio, l'elemento si sposta di 100 pixel a destra, ruota di 30 gradi e viene ingrandito di 2 volte sull'asse X e di 1.5 volte sull'asse Y.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traslazione, rotazione e scala</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
-
.box: l'elemento si sposta di 100 pixel a destra, ruota di 30 gradi e viene ingrandito di 2 volte sull'asse X e di 1.5 volte sull'asse Y
3.3 Influenza dell'ordine delle trasformazioni
Quando si combinano più trasformazioni, è importante comprendere che vengono applicate in sequenza. Ciò significa che ogni trasformazione successiva influenzerà il risultato della precedente.
In questo esempio viene mostrato come cambiare l'ordine delle trasformazioni influenzi il risultato finale.
Esempio A: prima la rotazione, poi la traslazione
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prima la rotazione, poi la traslazione</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Esempio B: prima la traslazione, poi la rotazione
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prima la traslazione, poi la rotazione</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Spiegazione del codice:
-
.box-a: l'elemento viene prima ruotato di 45 gradi, poi spostato di 50 pixel a destra e in basso, il che porta l'elemento a muoversi diagonalmente dalla sua nuova posizione dopo la rotazione -
.box-b: l'elemento viene prima spostato di 50 pixel a destra e in basso, poi ruotato di 45 gradi, facendo sì che l'elemento ruoti rispetto alla sua nuova posizione
GO TO FULL VERSION