No curso de hoje, apresentarei como criar cubos 3D usando o CSS3. Você pode navegar pelos efeitos reais através do link abaixo, operar as teclas para cima e para baixo para a esquerda e direita para obter o efeito flip do cubo.
Endereço da demonstração : http://www.cuoxin.com/jiaoben/70022.htmlVamos começar com como fazê -lo.
html :<div id = "experimento">
<div id = "cubo">
<div>
Um rosto
</div>
<div>
Para cima, para baixo, esquerda, direita
</div>
<div>
Lorem ipsum.
</div>
<div>
Novas formas de navegação são divertidas.
</div>
<div>
Cubo 3D rotativo
</div>
<div>
Mais conteúdo
</div>
</div>
</div>
No HTML acima, os 6 divs com classe como face representam as 6 faces do cubo e são distinguidas usando os nomes de classe de um a seis. O recipiente externo contém duas camadas de recipientes com cubo de identificação e experimento. Ambas as camadas são necessárias. Sem ninguém, o efeito 3D não pode ser produzido.
Entre eles, o experimento desempenha o papel da lente. Defina a distância focal para que o efeito 3D possa ser exibido nos elementos internos.
A perspectiva atributo define a profundidade do plano do eixo z e também define as dimensões relativas dos elementos acima e abaixo do plano. Em geral, quanto menor o valor da perspectiva, maior o objeto, mais próximo ele estiver de você; Quanto maior o valor da perspectiva, menor o objeto, mais longe de você. Você pode visualizar o efeito por meio de http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.
A propriedade de origem em perspectiva define a origem da perspectiva.
CSS :#experiment {
-Webkit-Perspective: 800;
-Moz-Perspective: 800;
-O-Perspectiva: 800;
Perspectiva: 800;
-Webkit-Perspective-Origin: 50% 200px;
-Moz-Perspective-Origin: 50% 200px;
-O-Origin: 50% 200px;
Origin em perspectiva: 50% 200px;
}
As propriedades definidas pelo cubo contêm uma largura e altura fixa e definem a posição como relativa. A altura e a largura fixa são necessárias para que os elementos no cubo possam executar animações 3D dentro de uma área definida. Se você definir a altura e a largura para 100%, os elementos no cubo se moverão por toda a faixa de página.
A transição é usada para definir propriedades relacionadas à animação. estilo de transformação: preservação-3d; Faz com que todos os elementos no cubo produzam efeitos 3D como um todo.
Você pode navegar http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-perspective-animate-transition/ para obter mais informações.
CSS:
#cube {
Posição: relativa;
margem: 100px automático;
Altura: 400px;
Largura: 400px;
-Webkit-transição: -webkit-transform 2s linear;
-moz-transição: -moz-transform 2s linear;
-O-transição: -o-transform 2s linear;
Transição: transformar 2s linear;
-webkit-transform-estilo: preserve-3d;
-moz-transform-estilo: preservação-3d;
-o-transform-estilo: preserve-3d;
estilo de transformação: preservação-3d;
}
Em seguida, defina o atributo CSS para as 6 faces do cubo.
CSS :.face {
Posição: Absoluto;
Altura: 360px;
Largura: 360px;
preenchimento: 20px;
cor de fundo: RGBA (50, 50, 50, 0,7);
}
Em seguida, defina as propriedades relacionadas a 3D das 6 faces, use giratex ou giratey para atingir o giro da superfície do cubo e use o tradutor para alcançar o movimento da superfície do cubo no espaço tridimensional.
CSS :#cube .one {
-Webkit-transform: giratex (90deg) Tradratez (200px);
-moz-transform: giratex (90deg) Tradratez (200px);
-o-transform: giratex (90deg) Tradratez (200px);
Transform: Rotatex (90DEG) Tradlatez (200px);
}
#cube .two {
-Webkit-transform: Tradratez (200px);
-Moz-transform: Translatez (200px);
-O-transform: Tradratez (200px);
Transform: Tradlez (200px);
}
#cube .three {
-Webkit-transform: giratey (90deg) Tradlatez (200px);
-moz-transform: giratey (90deg) Tradratez (200px);
-o-transform: giratey (90deg) Tradratez (200px);
Transform: Rotatey (90DEG) Tradlatez (200px);
}
#cube .four {
-Webkit-transform: girtatey (180deg) Tradratez (200px);
-Moz-transform: Rotatey (180DEG) Translatez (200px);
-o-transform: giratey (180deg) Tradratez (200px);
Transform: Rotatey (180DEG) Tradlatez (200px);
}
#cube .five {
-Webkit-transform: giratey (-90deg) Tradratez (200px);
-moz-transform: giratey (-90deg) translatez (200px);
-o-transform: giratey (-90deg) translatez (200px);
Transform: giratey (-90deg) Tradlatez (200px);
}
#cube .six {
-webkit-transform: giratex (-90deg) translatez (200px);
-moz-transform: giratex (-90deg) translatez (200px);
-o-transform: giratex (-90deg) translatez (200px);
Transform: giratex (-90deg) Tradlatez (200px);
}
A última coisa a fazer é vincular o evento KeyDown à página, de modo que, quando você pressiona as teclas para cima, para baixo, esquerda e direita, o efeito do movimento do flip de cubo seja alcançado.
JavaScript:
var xangle = 0, Yangle = 0;
document.addeventlistener ('keydown', função (e)
{
Switch (e.KeyCode)
{
Caso 37: // Esquerda
Yangle -= 90;
quebrar;
Caso 38: //
xangle += 90;
quebrar;
Caso 39: // Right
Bincange += 90;
quebrar;
Caso 40: // Down
xangle -= 90;
quebrar;
};
$ ('cubo'). style.webkittransform = "girtatex ("+xangle+"deg) giratey ("+yangle+"deg);
}, false);
Isso é tudo para o curso, você pode experimentá -lo a seguir.