Comentário: Li um artigo sobre como usar o CSS3 para criar tetraedrons 3D. Eu pensei que era muito bom, então tirei e compartilhei com você como usar o div+css para criar triângulos. Aqui vou primeiro colar o código relevante e depois explicar o princípio para você
Hoje eu li um artigo sobre como usar o CSS3 para criar tetraedrons 3D. Eu pensei que era muito bom, então tirei e compartilhei com você.A primeira coisa que quero compartilhar com você é como usar o Div+CSS para criar triângulos. Aqui, primeiro colo o código relevante e depois explicarei os princípios para você.
html:
<div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
Posição: relativa;
margem: 100px automático;
Altura: 500px;
Largura: 100px;
}
#pyramid> div {
Posição: Absoluto;
estilo de fronteira: sólido;
largura de fronteira: 200px 0 200px 346px;
}
#pyramid> div: após {
Posição: Absoluto;
Conteúdo: "Triângulo";
Cor: #ffff;
Esquerda: -250px;
Alinhamento de texto: centro;
}
#pyramid> div: primeiro filho {
cor de borda: #ff0000 transparente #ff0000 rgba (50, 50, 50, 0,6);
}
</style>
Efeito de corrida:
Análise de princípios:
No código HTML, definimos duas divs, a divisão externa é um objeto de contêiner e a div interior é usada para gerar triângulos. No código CSS, não definimos a largura e a altura da div, mas apenas definimos a largura das três bordas da borda (superior, para baixo e esquerda). Ao definir cores diferentes para os três lados, eles se tornarão três triângulos diferentes, respectivamente.
Nesse momento, precisamos simplesmente definir as cores nos lados superior e inferior para cores transparentes, e um triângulo equilátero aparecerá.
#pyramid> div: primeiro filho {
cor de borda: RGBA transparente transparente transparente (50, 50, 50, 0,6);
}
Imagem de reprodução:
Entre eles, o local mostrado no círculo vermelho é onde a div interna está localizada. Ele é um objeto invisível com 0 largura e 0 altura, mas na verdade existe.
O que falaremos a seguir é como implementar o 3D tetraedrons e como criar animações.
Primeiro, cole o código relevante.
html:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
Posição: relativa;
margem: 100px automático;
Altura: 500px;
Largura: 100px;
-webkit-transform-estilo: preserve-3d;
-Webkit-Animação: Spin 10s Infinito linear;
-Webkit-transform-original: 116px 200px 116px;
-moz-transform-estilo: preservação-3d;
-Moz-Animação: Spin 10s Linear Infinite;
-moz-transform-original: 116px 200px 116px;
-ms-transform-estilo: preserve-3d;
-ms-animação: spin 10s infinito linear;
-ms-transform-original: 116px 200px 116px;
estilo de transformação: preservação-3d;
Animação: Spin 10s Linear Infinite;
Origina de transformação: 116px 200px 116px;
}
@-webkit-keyframes spin {
de {
-Webkit-transform: girtatex (0deg) girtatey (0deg) giratez (0deg);
}
para {
-Webkit-transform: giratex (360deg) girtatey (360deg) giratez (360deg);
}
}
@-Moz-Keyframes spin {
de {
-moz-transform: giratex (0deg) girtatey (0deg) giratez (0deg);
}
para {
-moz-transform: giratex (360deg) girtatey (360deg) giratez (360deg);
}
}
@-ms-keyframes spin {
de {
-ms-transform: giratex (0deg) girtatey (0deg) giratez (0deg);
}
para {
-ms-transform: giratex (360deg) girtatey (360deg) giratez (360deg);
}
}
@keyframes spin {
de {
Transform: giratex (0deg) giratey (0deg) giratez (0deg);
}
para {
Transform: giratex (360deg) giratey (360deg) giratez (360deg);
}
}
#pyramid> div {
Posição: Absoluto;
estilo de fronteira: sólido;
largura de fronteira: 200px 0 200px 346px;
-Webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
Origin de transformação: 0 0;
}
#pyramid> div: após {
Posição: Absoluto;
Conteúdo: "Triângulo";
Cor: #ffff;
Esquerda: -250px;
Alinhamento de texto: centro;
}
#pyramid> div: primeiro filho {
cor de borda: RGBA transparente transparente transparente (50, 50, 50, 0,6);
-Webkit-transform: giratey (-19.5deg) giratex (180deg) tradutor (-400px);
-moz-transform: giratey (-19.5deg) giratex (180deg) tradutor (-400px);
-ms-transform: giratey (-19.5deg) giratex (180deg) tradutor (-400px);
Transform: giratey (-19.5deg) giratex (180deg) tradutor (-400px);
}
#pyramid> div: nth-child (2) {
cor de borda: RGBA transparente transparente transparente (50, 50, 50, 0,6);
-Webkit-transform: girtatey (90deg) giratez (60deg) giratex (180deg) tradutor (-400px);
-moz-transform: giratey (90deg) giratez (60deg) giratex (180deg) tradutor (-400px);
-ms-transform: giratey (90deg) giratez (60deg) giratex (180deg) tradutor (-400px);
Transform: giratey (90deg) giratez (60deg) giratex (180deg) tradutor (-400px);
}
#Pyramid> Div: Nth-Child (3) {
cor de borda: RGBA transparente transparente transparente (50, 50, 50, 0,9);
-Webkit-transform: giratex (60deg) giratey (19.5deg);
-moz-transform: giratex (60deg) giratey (19.5deg);
-ms-transform: giratex (60deg) giratey (19.5deg);
Transform: giratex (60deg) giratey (19.5deg);
}
#pyramid> div: nth-child (4) {
cor de borda: RGBA transparente transparente transparente (50, 50, 50, 0,8);
-Webkit-transform: giratex (-60deg) giratey (19,5deg) translatex (-116px) translatey (-200px) translatez (326px);
-moz-transform: giratex (-60deg) giratey (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
-ms-transform: giratex (-60deg) giratey (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
Transform: giratex (-60deg) giratey (19.5deg) translatex (-116px) traduzey (-200px) translatez (326px);
}
</style>
Agora comece a explicar o código relevante.
O código HTML é semelhante ao anterior, que é que existem três divs adicionais, que são usados como os outros três lados do tetraedro.
No código CSS, usamos #Pyramid> Div: Nth-Child (n) para encontrar as quatro faces do trihedron, definir as cores dos quatro lados da borda e defini-los em triângulos, respectivamente. Defina seu ângulo, orientação e posição no espaço 3D através dos métodos Rotatex, Rotatey, TranslateEx, Traduzes e Translatez do atributo. Isso envolve muito conhecimento matemático, e todos precisam complementar o conhecimento relevante.
Através do arranjo acima, o tetraedro é formado. Em seguida, é adicionar efeitos de animação a ele. As coisas usadas aqui também são muito simples, ou seja, animação e quadros -chave. Você pode aprender as propriedades relacionadas ao CSS3 no site, para que eu não explique muito aqui.
Neste ponto deste artigo, você pode colar o código HTML e CSS juntos para ver o efeito final.
Há algo no código que você não entende, para que você possa me deixar uma mensagem.