Propiedad de origen de perspectiva CSS
Ejemplo
Defina desde qué posición el usuario está mirando el elemento posicionado en 3D:
#div1
{
perspective: 100px;
perspective-origin: left;
}
Definición y uso
La perspective-origin
propiedad define desde qué posición el usuario está mirando el elemento posicionado en 3D.
Al definir la perspective-origin
propiedad de un elemento, son los elementos CHILD los que obtendrán el efecto, NO el elemento en sí.
Nota: ¡ Esta propiedad debe usarse junto con la propiedad de perspectiva !
Para comprender mejor la propiedad de origen de la perspectiva, vea una demostración .
Valor por defecto: | 50% 50% |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.perspectiveOrigin="10px 50%" |
Compatibilidad con 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 de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
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
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: Transformaciones 3D de CSS
Referencia de HTML DOM: propiedad de perspectiva Origen