Use CSS para obter efeito de perspectiva

Use CSS para obter efeito de perspectiva

Hoje tive a ideia de usar css para conseguir o efeito de perspectiva. A princípio, pensei em nosso método comum de adicionar efeitos de sombra, que é obtido usando vários divs por meio de deslocamento, mas isso requer muitos divs, o que não é o ideal. Então pensei em uma propriedade do CSS: border, que pode produzir um efeito diagonal na junção das bordas. Isso pode ser alcançado com dois divs. Vamos primeiro dar uma olhada no efeito final e depois analisar o processo de implementação.

Primeiro, vamos dar uma olhada em como a borda gera o efeito diagonal. Adicione o seguinte código ao cabeçalho do seu HTML e você verá esse efeito .

.border{largura:0;altura:0;largura da borda:50px;cor da borda:#f00 #0f0 #00f #000;estilo da borda:sólido;}

Com a base acima, podemos usar dois divs adicionais para obter o efeito de perspectiva.

1. O código HTML é o seguinte :

2. Código CSS:

.perspectiva-externa{
posição:relativo;
width:170px;/*A largura do elemento para obter o efeito de perspectiva + distância da perspectiva*/
height:140px;/*A altura do elemento para obter o efeito de perspectiva + distância da perspectiva*/
}
.perspectiva-interior{
borda:1px sólido #f60;
altura:118px;
largura: 148px;
cor de fundo:#fff;
}
.perspectiva-r,
.perspectiva-b{
posição:absoluta;
largura:0;
altura:0;
}
.perspectiva-r{
certo:0;
height:100px;/*A altura do elemento para obter o efeito de perspectiva (120px) - (border-top:20px)*/
border-left:20px sólido #000;/*distância da perspectiva direita*/
border-top:20px sólido #fff;/*distância da perspectiva abaixo*/
}
.perspectiva-b{
inferior:0;
width:150px;/*Largura do elemento mais externo (170px) - border-left*/
borda esquerda: 20px sólido #fff;
borda superior: 20px sólido #000;
}

.perspective-outer define a altura e a largura e as posiciona relativamente para garantir que as áreas de perspectiva à direita e abaixo possam ser posicionadas nas posições correspondentes. Os valores de altura e largura são a altura do elemento para alcançar a perspectiva. efeito mais a distância de perspectiva correspondente. .perspective-r só precisa definir o valor da altura, e seu valor é a altura de .perspective-outer menos border-top. .perspective-b só precisa definir o valor da largura, e seu valor é a largura de .perspective-. exterior menos borda esquerda. Os valores de largura de border-top de .perspective-r e border-left de .perspective-b determinam o ângulo de perspectiva. Os valores de largura de border-left de .perspective-r e border-top de .perspective-b determinam a distância da perspectiva. Entre eles, a cor da borda superior de .perspective-r e da borda esquerda de .perspective-b é a cor de fundo do elemento pai. O elemento pai da minha página de teste aqui é o corpo, portanto é branco.

3. Pós-escrito

Este artigo é apenas um teste simples, seu objetivo é inspirar outras pessoas. Não nos importamos com o quão prático é esse método, mas ele pode pelo menos nos dar uma maneira de resolver o problema. Espero que este artigo possa ser útil para você.

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