Propiedad CSS transform-origin
La propiedad transform-origin te permite cambiar el origen de la transformación de un elemento.
La propiedad transform-origin es una de las propiedades CSS3.
La propiedad transform-origin solo surte efecto cuando se aplica una función de transformación al elemento a través de la propiedad transform.
Esta propiedad puede especificarse mediante palabras clave de desplazamiento, valores de longitud o valores porcentuales.
INFO
Históricamente, se utilizaba el prefijo -webkit- para Safari, Chrome y versiones antiguas de Opera. Los navegadores modernos ya no requieren prefijos de proveedor para esta propiedad.
| Valor inicial | 50% 50% 0 |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredable | No. |
| Animable | Sí. El grado es animable. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.transform-origin = "10% 30%"; |
Sintaxis
Valores de CSS transform-origin
transform-origin: x-offset y-offset z-offset | initial | inherit;Ejemplo de la propiedad transform-origin:
Ejemplo de código CSS transform-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.big {
position: relative;
height: 300px;
width: 300px;
margin: 80px;
padding: 5px;
border: 2px solid #666666;
background-color: #eeeeee;
}
.little {
padding: 60px;
position: absolute;
border: 2px solid #666666;
background-color: #8ebf42;
-webkit-transform: rotate(35deg);
-webkit-transform-origin: 70% 90%;
transform: rotate(35deg);
transform-origin: 70% 90%;
}
</style>
</head>
<body>
<h2>Transform-origin property example</h2>
<div class="big">
<div class="little">Box</div>
</div>
</body>
</html>Resultado
Otro ejemplo que muestra la diferencia entre los valores.
Ejemplo de transform-origin con cuatro valores:
Otro ejemplo de código CSS transform-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eeeeee;
font-size: 1.1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.container {
margin: 10px auto;
max-width: 700px;
}
.wrap {
width: 150px;
height: 150px;
border: 2px solid #666666;
display: inline-block;
margin: 100px;
}
.box {
width: 150px;
height: 150px;
position: relative;
color: #eeeeee;
text-align: center;
line-height: 150px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.a {
background-color: #0747af;
}
.b {
background-color: #40b530;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.c {
background-color: #666666;
-webkit-transform-origin: 90% 120%;
transform-origin: 90% 120%;
}
.d {
background-color: #ffdb11;
-webkit-transform-origin: 80px 40px;
transform-origin: 80px 40px;
}
</style>
</head>
<body>
<h2>Transform-origin property example</h2>
<div class="container">
<div class="wrap">
<div class="box a">
50% 50%
</div>
</div>
<div class="wrap">
<div class="box b">
top left
</div>
</div>
<div class="wrap">
<div class="box c">
90% 120%
</div>
</div>
<div class="wrap">
<div class="box d">
80px 40px
</div>
</div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
x-offset | Especifica la posición horizontal. Acepta palabras clave (left, center, right), longitudes o porcentajes. |
y-offset | Especifica la posición vertical. Acepta palabras clave (top, center, bottom), longitudes o porcentajes. |
z-offset | Especifica la posición de profundidad a lo largo del eje z para transformaciones 3D. Acepta valores de longitud. |
initial | Establece esta propiedad en su valor predeterminado. |
inherit | Hereda esta propiedad de su elemento padre. |
Práctica
La propiedad transform-origin solo funciona con