Utilice CSS para lograr el efecto de perspectiva.

Utilice CSS para lograr el efecto de perspectiva.

Hoy se me ocurrió la idea de usar CSS para lograr el efecto de perspectiva. Al principio, pensé en nuestro método común para agregar efectos de sombra, que se logra mediante el uso de múltiples divs mediante desplazamiento, pero esto requiere muchos divs, lo cual no es ideal. Luego, pensé en una propiedad de CSS: borde, que puede producir un efecto diagonal en la unión de los bordes. Esto se puede lograr con dos divs. Primero echemos un vistazo al efecto final y luego analicemos el proceso de implementación.

Primero, echemos un vistazo a cómo el borde genera el efecto diagonal. Agregue el siguiente código al encabezado de su HTML y verá dicho efecto .

.border{ancho:0;alto:0;ancho-borde:50px;color-borde:#f00 #0f0 #00f #000;estilo de borde:sólido;}

Con la base anterior, podemos usar dos divs adicionales para lograr el efecto de perspectiva.

1. El código html es el siguiente :

2. Código CSS:

.perspectiva-externa{
posición: relativa;
width:170px;/*El ancho del elemento para lograr el efecto de perspectiva + distancia de perspectiva*/
height:140px;/*La altura del elemento para lograr el efecto de perspectiva + distancia de perspectiva*/
}
.perspectiva-interior{
borde: 1px sólido #f60;
altura: 118 px;
ancho: 148px;
color de fondo: #fff;
}
.perspectiva-r,
.perspectiva-b{
posición:absoluta;
ancho: 0;
altura: 0;
}
.perspectiva-r{
derecha: 0;
height:100px;/*La altura del elemento para lograr el efecto de perspectiva (120px) - (border-top:20px)*/
border-left:20px solid #000;/*distancia de perspectiva derecha*/
border-top:20px solid #fff;/*distancia de perspectiva debajo*/
}
.perspectiva-b{
abajo: 0;
width:150px;/*Ancho del elemento más externo (170px) - borde izquierdo*/
borde izquierdo: 20px sólido #fff;
borde superior: 20px sólido #000;
}

.perspective-outer define la altura y el ancho, y los posiciona relativamente para garantizar que las áreas de perspectiva a la derecha e inferior se puedan colocar en las posiciones correspondientes. Los valores de altura y ancho son la altura del elemento para lograr la perspectiva. efecto más la distancia de perspectiva correspondiente. .perspective-r solo necesita establecer el valor de altura, y su valor es la altura de .perspective-outer menos border-top .perspective-b solo necesita establecer el valor de ancho, y su valor es el ancho de .perspective-. exterior menos borde izquierdo. Los valores de ancho del borde superior de .perspective-r y del borde izquierdo de .perspective-b determinan el ángulo de perspectiva. Los valores de ancho de borde izquierdo de .perspective-r y borde superior de .perspective-b determinan la distancia de perspectiva. Entre ellos, el color del borde superior de .perspective-r y del borde izquierdo de .perspective-b es el color de fondo del elemento principal. El elemento principal de mi página de prueba aquí es el cuerpo, por lo que es blanco.

3. Posdata

Este artículo es sólo una prueba sencilla, su propósito es inspirar a otros. No nos importa cuán práctico sea este método, pero al menos puede brindarnos una manera de resolver el problema. Espero que este artículo pueda resultarte útil.

Texto original: http://www.denisdeng.com/?p=474