Propiedad transform
La propiedad transform establece transformaciones
en un elemento, tales como rotación,
escalado,
inclinación,
desplazamiento
y otras. Las transformaciones correspondientes se escriben
separadas por espacios:
selector {
transform: rotate(30deg) scale(3);
}
Ejemplo
En este ejemplo, el bloque está girado 30
grados en sentido horario:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
En este ejemplo, además de la rotación, se ha añadido también una inclinación:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
En este ejemplo, además de la rotación y la inclinación, se ha añadido un cambio de escala:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg) scale(2, 3);
border: 1px solid black;
width: 100px;
height: 50px;
}
: