Ejemplo
Ajuste el punto de vista desde donde se ve un elemento:
div
{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
Inténtalo tú mismo " Definición y Uso
La propiedad perspectiva define cuántos píxeles se coloca un elemento 3D de la vista. Esta propiedad le permite cambiar la perspectiva sobre cómo los elementos 3D son vistas.
Al definir la propiedad perspectiva de un elemento, que es los elementos secundarios que reciben la vista en perspectiva, no el propio elemento.
Note: La propiedad perspectiva sólo afecta a elementos transformados en 3D!
Tip: Utilice esta propiedad junto con la perspectiva del origen propiedad, lo que le permite cambiar la posición inferior de elementos 3D.
Para entender mejor la propiedad perspectiva, ver una demostración .
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.perspective="50px" 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 | 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
| El valor de la propiedad | Descripción |
|---|---|
| length | ¿A qué distancia se coloca el elemento de la vista |
| ninguna | Valor por defecto. Igual que 0. El punto de vista no se ha establecido |
| 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: perspective property