Propiedad perspective-origin de CSS
perspective-origin define la posición desde la cual el usuario observa el elemento posicionado en 3D.
La propiedad perspective-origin es una de las propiedades de CSS3.
La propiedad perspective utiliza el valor de perspective-origin como punto de fuga. Por defecto, el punto de fuga de un espacio 3D se encuentra en el centro. La propiedad perspective-origin puede utilizarse para cambiar la posición del punto de fuga.
La propiedad perspective-origin debe utilizarse junto con la propiedad perspective en el mismo elemento o en un ancestro para que surta efecto.
Cuando se especifican dos o más valores pero ninguno es una palabra clave, el primer valor describe la posición horizontal y el segundo describe la posición vertical. Si solo se define un valor, se sobreentiende que el segundo es el valor central.
INFO
Solo el elemento hijo obtiene una vista en perspectiva, no el elemento en sí.
| Valor inicial | 50% 50% |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredado | No. |
| Animable | Sí. La transformación de la perspectiva es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.perspectiveOrigin = "20px 70%"; |
Sintaxis
Sintaxis de CSS para perspective-origin
perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;Ejemplo de la propiedad perspective-origin:
Ejemplo de código CSS para perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: 50% 50%;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: 50% 50%:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad perspective-origin con el valor "left":
Ejemplo de valor "left" en CSS para perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 20px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: left;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: left:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Ejemplo de la propiedad perspective-origin con el valor "right":
Ejemplo de valor "right" en CSS para perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 160px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Ejemplo de la propiedad perspective-origin definida como "bottom right":
Ejemplo de valor bottom en CSS para perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: bottom right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: bottom right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| x-position | Especifica la posición de la vista en el eje x. Puede tener los siguientes valores: - left, que equivale al valor de longitud 0. - right, que equivale al valor porcentual del 100%. - center, que equivale al valor porcentual del 50%. - length - percentage. |
| y-position | Especifica la posición de la vista en el eje y. Puede tener los siguientes valores: - top, que equivale al valor de longitud 0. - center, que equivale al valor porcentual del 50%. - bottom, que equivale al valor porcentual del 100%. - length |
| x | Establece la posición horizontal en el centro (50%). |
| y | Establece la posición vertical en el centro (50%). |
| closest-side | Establece el origen de la perspectiva en el lado más cercano del elemento. |
| farthest-side | Establece el origen de la perspectiva en el lado más lejano del elemento. |
| initial | Establece esta propiedad en su valor predeterminado. |
| inherit | Hereda esta propiedad de su elemento padre. |
Practice
¿Qué hace la propiedad CSS 'perspective-origin'?