Ejemplo
Ajuste la colocación de base de un elemento 3D:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Inténtalo tú mismo " Definición y Uso
La propiedad perspectiva origen define el lugar donde un elemento 3D se basa en las direcciones x y el eje y. Esta propiedad le permite cambiar la posición inferior de elementos 3D.
Al definir la propiedad perspectiva del origen de un elemento, es los elementos secundarios que se colocan, no el elemento en sí.
Note: Esta propiedad se debe utilizar junto con la perspectiva de la propiedad, y sólo afecta a los elementos 3D transforma!
Para entender mejor la propiedad perspectiva del origen, ver una demostración .
| Valor por defecto: | 50% 50% |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.perspectiveOrigin="10px 50%" 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- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4.0.3 -webkit- | 23.0 15.0 -webkit- |
sintaxis CSS
perspective-origin:x-axis y-axis|initial|inherit;Valores de propiedad
| El valor de la propiedad | Descripción |
|---|---|
| x-axis | Definición de donde la vista se coloca en el eje x Valores posibles:
Valor por defecto: 50% |
| y-axis | Definición de donde la vista se coloca en el eje y Valores posibles:
Valor por defecto: 50% |
| 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: CSS transformaciones 3D
Referencia HTML DOM: perspectiveOrigin property