La propiedad de origen de la perspectiva en CSS se usa para definir la posición en la que el usuario mira el objeto 3D, es decir, el punto de fuga del objeto 3D.
Sintaxis:
perspective-origin: x-axis y-axis|initial|inherit;
Valores de propiedad:
- Eje x: Representa la posición horizontal del origen de la perspectiva. Los posibles valores del eje x se enumeran a continuación:
- porcentaje (%): Establece el eje x en términos de porcentaje.
- longitud: Define la longitud del eje x.
- left: Establece la posición a la izquierda en el eje x.
- cente: Establece la posición del centro en el eje x.
- right: I ajusta la posición a la derecha en términos del eje x.
- Eje y: Representa la posición vertical del origen de la perspectiva. Los posibles valores del eje y se enumeran a continuación:
- porcentaje (%): Establece la posición del eje y en términos de porcentaje.
- length: Establece la posición en términos de longitud.
- top: Establece la posición superior en el eje y.
- center: Establece la posición del centro en el eje y.
- bottom: Establece la posición inferior en el eje y.
- initial: establece la propiedad de origen de la perspectiva en su valor predeterminado.
- heredar: la propiedad de origen de la perspectiva se hereda de su padre.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS perspective-origin Property
</title>
<style>
.container1 {
padding: 20px;
perspective: 100px;
perspective-origin: 75%;
/* For Safari Browsers */
-webkit-perspective: 100px;
-webkit-perspective-origin: 75%;
}
.container2 {
padding: 20px;
perspective: 100px;
perspective-origin: bottom right;
/* For Safari Browsers */
-webkit-perspective: 100px;
-webkit-perspective-origin: bottom right;
}
.container3 {
padding: 20px;
perspective: 100px;
perspective-origin: center;
/* For Safari Browsers */
-webkit-perspective: 100px;
-webkit-perspective-origin: center;
}
.rotate {
width: 100px;
padding: 50px;
text-align: center;
background: green;
transform: rotateX(10deg);
}
</style>
</head>
<body>
<div class = "container1">
<p>perspective-origin: 75%;</p>
<div class = "rotate">image</div>
</div>
<div class = "container2">
<p>perspective-origin: bottom right;</p>
<div class = "rotate">image</div>
</div>
<div class = "container3">
<p>perspective-origin: center;</p>
<div class = "rotate">image</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de origen de perspectiva se enumeran a continuación:
- Google Chrome36.0, 12.0 -webkit-
- Apple Safari 9.0, 4.0.3 -webkit-)
- Mozilla Firefox 16.0, 10.0 -moz-
- Opera 23.0, 15.0 -webkit-
- Internet Explorer 10.0
Publicación traducida automáticamente
Artículo escrito por SoumyaNaraparaju y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA