English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manual de referencia CSS

CSS @reglas (RULES)

大全 de Atributos CSS

CSS3 perspective-Método de uso y ejemplo de la propiedad origin

perspective-Definición de la propiedad origin 3El eje X y Y en los que se basa el elemento D. Esta propiedad le permite cambiar 3La posición inferior del elemento D. La perspectiva definida en el momento de la definición-La propiedad origin, que es un subelemento del elemento, la perspectiva, no el elemento en sí.

La siguiente tabla describe el uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.

Valor predeterminado:50P%
Adecuado para:Elementos transformables
Herencia:sin
Animable:es.Consulte Atributos de animación.
Versión: CSS3nueva característica
Sintaxis de JavaScript:object.style.perspectiveOrigin="20%"

Perspective-La sintaxis de uso de origin

La sintaxis de este atributo es la siguiente:

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

Nota:Si solo se especifica perspective-La propiedad origin especifica un valor, y el segundo valor se asume como el centro, igual a50％ de los valores.

Este ejemplo muestra cómo usar perspective-propiedad origin.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}
Prueba a ver‹/›

Nota:Si al menos un valor de los dos no es un nombre clave, el primer valor representa la posición horizontal del punto de origen de la perspectiva (o desplazamiento), y el segundo valor representa la posición vertical del punto de origen de la perspectiva (o desplazamiento).

Valor del atributo

La tabla a continuación describe los valores de esta propiedad.

ValorDescripción
x-axis

Representa la posición horizontal del punto de origen de la perspectiva (o desplazamiento). Puede tener uno de los siguientes valores:

  • percentage -Define el desplazamiento relativo a la anchura del elemento.

  • length -Define la cantidad de desplazamiento del valor de longitud utilizado.

  • left -igual a 0% o cero anchura.

  • center -igual a la anchura de la caja50% o la mitad.

  • right -igual a100% o toda la anchura de la caja.

y-axis

Representa la posición vertical del punto de origen de la perspectiva (o desplazamiento). Puede tener uno de los siguientes valores:

  • percentage -Define el desplazamiento relativo a la altura del elemento.

  • length -Define la cantidad de desplazamiento del valor de longitud utilizado.

  • top -igual a 0% o cero altura.

  • center -igual a la altura de la caja50% o la mitad.

  • bottom -igual a100% o toda la altura de la caja.

initialEstablecer este atributo en su valor predeterminado.
inheritSi se especifica, el elemento asociado utiliza su perspectiva del elemento padre-Valores del atributo origin.

Compatibilidad del navegador

perspective-La compatibilidad del navegador del atributo origin, los números en la tabla a continuación indican la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.

  • Firefox 10+ -moz-,16 +

  • Google Chrome 12+ -webkit-,36+

  • Internet Explorer 10+

  • Apple Safari 4.0.3+ -webkit-

  • Opera 15+ -webkit-,23+

Leer más

Consulte los siguientes tutoriales:CSS3 3Transformación D.

Propiedades relacionadas:perspective,backface-visibility,transform,transform-origin,transform-style.

Atributo position de CSSCSS3 Atributo perspective