Propiedad de perspectiva CSS
Ejemplo
Dale cierta perspectiva a un elemento posicionado en 3D:
#div1
{
perspective: 100px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La perspective
propiedad se utiliza para dar cierta perspectiva a un elemento posicionado en 3D.
La perspective
propiedad define qué tan lejos está el objeto del usuario. Por lo tanto, un valor más bajo dará como resultado un efecto 3D más intenso que un valor más alto.
Al definir la perspective
propiedad de un elemento, son los elementos HIJOS los que obtienen la vista en perspectiva, NO el elemento en sí.
Sugerencia: observe también la propiedad de origen de la perspectiva , que define en qué posición el usuario está mirando el objeto 3D.
Para comprender mejor la propiedad de perspectiva, vea una demostración .
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.perspective="50px" |
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 | 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: length|none;
Valores de propiedad
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Crea un cubo y establece diferentes perspectivas:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
páginas relacionadas
Tutorial de CSS: Transformaciones 3D de CSS
Referencia HTML DOM: propiedad de perspectiva