Ejemplo
Ajuste la colocación de un elemento de base girada:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Inténtalo tú mismo " Definición y Uso
La propiedad transform origen le permite cambiar la posición de los elementos transformados.
transformaciones 2D pueden cambiar las direcciones x y el eje y de un elemento. transformaciones 3D también puede cambiar el eje z de un elemento.
Para entender mejor la propiedad transform-origen, ver una demostración .
Note: Esta propiedad debe ser utilizado junto con el de transformar la propiedad.
Tip: Para entender mejor esta propiedad para transforma en 3D, ver una demostración .
| Valor por defecto: | 50% 50% 0 |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transformOrigin="0 0" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9,0 -MS- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
sintaxis CSS
transform-origin:x-axis y-axis z-axis|initial|inherit;Valores de propiedad
| El valor de la propiedad | Descripción |
|---|---|
| x-axis | Define donde la vista se coloca en el eje x. Valores posibles:
|
| y-axis | Define donde la vista se coloca en el eje y. Valores posibles:
|
| z-axis | Define donde la vista se coloca en el eje z (for 3D transformations) . Valores posibles:
|
| inicial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| heredar | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS tutorial: las transformaciones CSS 2D
CSS tutorial: CSS transformaciones 3D
Referencia HTML DOM: transformOrigin property