2.1 Proprietà transform-origin
La proprietà transform-origin in CSS definisce il punto rispetto al quale vengono applicate le trasformazioni, come rotate, scale, skew, e translate. Di default, questo punto si trova al centro dell'elemento, ma puoi modificarne la posizione per ottenere gli effetti visivi desiderati.
Basi di transform-origin
Sintassi della proprietà transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Dove:
x-axis: definisce la posizione del punto sull'asse orizzontaley-axis: definisce la posizione del punto sull'asse verticalez-axis: definisce la posizione del punto sull'asse Z (usato per trasformazioni 3D)
Valori possibili:
- Parole chiave:
top,right,bottom,left,center - Valori percentuali: impostano il punto di origine in percentuale rispetto alla dimensione dell'elemento
- Valori assoluti: impostano il punto di origine in pixel o altre unità di misura
Esempi di valori:
transform-origin: 50% 50%;— centro dell'elemento (valore di default)transform-origin: 0 0;— angolo in alto a sinistra dell'elementotransform-origin: 100% 100%;— angolo in basso a destra dell'elementotransform-origin: 50px 100px;— spostamento di 50 pixel a destra e 100 pixel in basso dall'angolo in alto a sinistra
Centralizzazione del punto di origine (impostazione predefinita)
In questo esempio, la trasformazione rotate avverrà attorno al centro dell'elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centralizzazione del punto di origine</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Spostamento del punto
Spostamento del punto di origine nell'angolo in alto a sinistra
In questo esempio, il punto di origine della trasformazione è spostato nell'angolo in alto a sinistra dell'elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto di origine nell'angolo in alto a sinistra</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spostamento del punto di origine nell'angolo in basso a destra
In questo esempio, il punto di origine della trasformazione è spostato nell'angolo in basso a destra dell'elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto di origine nell'angolo in basso a destra</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Impostazione dei valori
Uso di valori percentuali
In questo esempio, il punto di origine della trasformazione si trova al 25% orizzontalmente e al 75% verticalmente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto di origine con valori percentuali</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Uso di valori assoluti
In questo esempio, il punto di origine della trasformazione è spostato di 50 pixel orizzontalmente e 20 pixel verticalmente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto di origine con valori assoluti</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Applicazioni pratiche
Rotazione di un elemento attorno a un punto specifico
Utilizzare transform-origin è utile per creare elementi rotanti che devono girare attorno a un punto specifico. Ad esempio, creare la lancetta di un orologio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotazione della lancetta dell'orologio</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Esempio per la posizione di 1 ora */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Creazione di un elemento scalabile
Cambiare il punto di origine è utile anche per scalare gli elementi rispetto a diversi punti, il che può essere utile per creare interfacce dinamiche.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento scalabile</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION