1.1 Proprietà transform
Le trasformazioni CSS permettono di cambiare la posizione, dimensione, rotazione e inclinazione degli elementi senza modificare il normale flusso del documento. È uno strumento potente per creare interfacce web interattive e dinamiche. Diamo un'occhiata ai fondamenti delle trasformazioni usando le proprietà transform, translate, rotate, scale e skew.
La proprietà transform consente di applicare trasformazioni bidimensionali e tridimensionali agli elementi. Combina diverse funzioni di trasformazione come translate, rotate, scale e skew.
Sintassi:
element {
transform: transformation-function;
}
Dove:
transformation-function: funzione di trasformazione applicata all'elemento
Esempio di utilizzo:
.element {
transform: translate(50px, 100px);
}
1.2 Trasformazione translate
La trasformazione translate si usa per spostare un elemento sull'asse X e/o Y.
Sintassi:
element {
transform: translate(x, y);
}
Dove:
x: spostamento sull'asse X (può essere negativo o positivo)y: spostamento sull'asse Y (può essere negativo o positivo)
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trasformazione translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore.box:hover: quando si passa il cursore sopra l'elemento, viene applicata la trasformazionetranslate(50px, 50px), spostandolo di 50 pixel a destra e in basso
1.3 Trasformazione rotate
La trasformazione rotate viene utilizzata per ruotare un elemento attorno al suo centro.
Sintassi:
element {
transform: rotate(angle);
}
Dove:
angle: angolo di rotazione in gradi (può essere negativo o positivo)
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trasformazione rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore.box:hover: quando si passa il cursore sopra l'elemento, viene applicata la trasformazionerotate(45deg), ruotandolo di 45 gradi in senso orario
1.4 Trasformazione scale
La trasformazione scale si usa per modificare la dimensione di un elemento lungo l'asse X e/o Y.
Sintassi:
element {
transform: scale(sx, sy);
}
Dove:
sx: scaling lungo l'asse X (valore maggiore di 1 aumenta l'elemento, minore di 1 lo riduce)sy: scaling lungo l'asse Y (valore maggiore di 1 aumenta l'elemento, minore di 1 lo riduce)
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trasformazione scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore-
.box:hover: quando si passa il cursore sopra l'elemento, viene applicata la trasformazionescale(1.5, 1.5), aumentando la sua dimensione di 1.5 volte in entrambe le direzioni
1.5 Trasformazione skew
La trasformazione skew si usa per inclinare un elemento lungo l'asse X e/o Y.
Sintassi:
element {
transform: skew(ax, ay);
}
Dove:
ax: angolo di inclinazione sull'asse X (può essere negativo o positivo)ay: angolo di inclinazione sull'asse Y (può essere negativo o positivo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trasformazione skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore..box:hover: quando si passa il cursore sopra l'elemento, viene applicata la trasformazioneskew(20deg, 10deg), inclinandolo di 20 gradi sull'asse X e di 10 gradi sull'asse Y.
1.6 Combinazione di diverse trasformazioni
La proprietà transform consente di combinare diverse funzioni di trasformazione per ottenere effetti complessi.
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trasformazioni combinate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore.box:hover: quando si passa il cursore sopra l'elemento, vengono applicate contemporaneamente le trasformazionitranslate,rotate,scaleeskew, creando un effetto complesso
GO TO FULL VERSION