Cambiar la perspectiva de un elemento en CSS

En este artículo, vamos a aprender cómo cambiar la perspectiva de un elemento en CSS ? Los define la propiedad perspectiva cuántos píxeles se coloca un elemento 3D de la vista.

CSS es la herramienta de los diseñadores modernos. Atrás han quedado los días en que se acaba de utilizar CSS para cambiar el color y aplicar bordes a elemento. CSS es mucho más que él y es muy potente a la hora de diseñar. Con las propiedades nueva transformar en CSS, la industria del diseño web tiene algunas nuevas normas.

Las páginas web ahora pueden ser diseñados para producir efectos 3D. Esto es posible debido a la nueva propiedad en perspectiva CSS . Los define la propiedad perspectiva cuántos píxeles se coloca un elemento de 3D a partir de la vista. Esta propiedad le permite cambiar la perspectiva de cómo son vistos en 3D elementos. Esta propiedad es muy útil para construir pequeños elementos de diseño como voltear la página aur relojes giratorios, etc. Esta es la sintaxis de la nueva propiedad .

Código – CSS

.element {
-webkit-perspective: 300px; //For Google Chrome
perspective: 300px; //For other browsers
}

El valor de esta propiedad es en píxeles, que denota los píxeles de un elemento 3D se encuentren a la vista. En este artículo, vamos a mostrar cómo la propiedad junto con la perspectiva de transformar la propiedad puede cambiar el aspecto de la página, dándole un efecto de profundidad 3D. Aquí hay un ejemplo simple para mostrar estas propiedades en acción.

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<style>
#div-outer {
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px;
perspective: 150px;
}
#div-inner {
padding: 50px;
position: absolute;
top: 20px;
left: 20px;
border: 1px solid black;
background-color: #3498db;
-webkit-transform: rotateX(15deg) rotateY(25deg);
transform: rotateX(15deg) rotateY(25deg);
}
</style>
</head>
<body>
<div id="div-outer">
<div id="div-inner">Perspective</div>
</div>
</body>
</html>

salida

Change the perspective of an element in CSS - 4

En este código, tenemos dos divs , DIV-exterior y div-interiores . Tenga en cuenta que cuando aplicamos la propiedad en perspectiva elemento padre, sus elementos secundarios se ven afectados, no es el elemento principal como se puede ver la caja exterior no se ve afectada.

En el código CSS, hemos definido las dimensiones class div exterior y aplicado un conjunto de propiedades perspectiva de 150 px . Luego, en las propiedades de los elementos div -interno aplicamos la transformada propiedades rotateX y rotateY para mostrar cómo funcionan y crear un efecto de profundidad 3D.

DEMO

Esperanza usted tiene gusto del artículo. Comparte tu opinión en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *