CSS3 Transforme 3D usando CSS3 para criar cubos 3D dinâmicos (prática html5)

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.

Vamos começar com como fazê -lo.

<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.

#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.

.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.

#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.