Como criar animações 3D Flip Button Com CSS
Animações Flip são efeitos CSS populares que mostram tanto a frente quanto a parte de trás de um elemento HTML, transformando-os de cima para baixo, ou da esquerda para a direita (e vice-versa). Eles são rad em 2 dimensões, mas eles são ainda mais frios quando executados em 3D.
Neste post, vou mostrar como criar botões 3D simples, e adicione animações flip para eles.
Você pode ver o resultado na demonstração abaixo, se você clicar nos botões, eles executarão a animação de flip rotulada.
1. Criando o HTML para o botão 3D
Para criar um botão 3D (com Top → Bottom flip), primeiro empilharemos três Nós definimos o Adicionamos imagens de fundo às faces frontal e traseira do botão e definimos um gradiente linear legal por trás das imagens para ambos. O truque aqui é que no CSS, você pode definir várias imagens como imagem de fundo para o mesmo elemento, e você também pode declarar gradientes como imagens de fundo. A face do meio, Para cobrir o espaço entre as faces frontal e traseira com a do meio, nós Deite a face do meio plana através do plano x do espaço 3D usando o Como a face do meio foi colocada no plano x, seu ponto superior no eixo y vai 10px (metade de sua altura) abaixo do original. Então, para puxar de volta e alinhar a parte superior com as outras duas faces do botão, eu adicionei o Eu usei o Até agora, você só verá a face frontal na tela, como o plano x está escondido da vista, e no plano y (tela) a última face colocada foi a frente. Rodando o botão você será capaz de ver os outros rostos também. A propriedade CSS de estilo de transformação determina se os elementos filhos de um elemento HTML são exibidos planos ou posicionados no espaço 3D. No trecho de código abaixo, o Note que eu usei No entanto, no próximo passo, vamos mudá-lo para Neste ponto, o nosso botão 3D ainda não está animado. Podemos fazer isso usando o Vamos fazer o botão girar apenas ao passar o mouse, então ao invés do Note que no repositório do Github, eu adicionou uma caixa de seleção para cada botão a fim de disparar a animação em .flipbtn recipiente que funcionará como o botão 3D, e colocamos o botão 3D no .flipBtnWrapper embrulho.
2. Adicionando estilos básicos com CSS
largura e altura propriedades do wrapper, do botão e do botão, e posicioná-los usando a técnica de posicionamento relativo / absoluto. .flipBtnWrapper largura: 200px; altura: 200 px; posição: relativa; .flipBtn, .flipBtn_face width: 100%; altura: 100%; posição: absoluta;
3. Estilize as 3 faces dos botões
.flipBtn_mid, é dado um altura de 20px, e um mesmo espaço de 20px é criado entre as faces frontal e traseira. Nós alcançamos o último usando o translateZ () Função CSS que move um elemento ao longo do eixo z. Nós empurramos a face traseira para trás em 10px e levamos a face frontal para frente em 10px. .flipBtn_front background-image: url ("imagem / css-3d-flip-botão-animação-play.png"), gradiente linear (# FF6366 50%, # FEA56E); backface-visibility: oculto; transform: translateZ (10px); .flipBtn_back background-image: url ("imagem / css-3d-flip-botão-animação-pause.png"), gradiente linear (# FF6366 50%, # FEA56E); cor de fundo: azul; transformar: translateZ (-10px); .flipBtn_mid height: 20px; cor de fundo: # d5485a; transform: rotateX (90deg); topo: -10px; transform: rotateX (90deg); regra que torna perpendicular para ambos os lados do botão dianteiro e traseiro no plano y.topo: -10px governar bem.backface-visibility Propriedade CSS para o rosto da frente, então quando virarmos o botão, a parte de trás da face frontal não será visível.
4. Rodando o botão
transform-style: preserve-3d; regra dá volume 3D ao nosso botão, enquanto o transformar: rotatexX () propriedade gira em torno do eixo x. .flipBtn transform-style: preserve-3d; transform: rotateX (-120deg);
-120deg unicamente para fins de demonstração, por isso é mais fácil ilustrar como funciona a rotação de botões.
-180 graus para fazer o botão virar completamente.5. Animando o botão
transição propriedade. Nós usamos o transformar propriedade para o primeiro valor, pois esta é a propriedade para a qual queremos aplicar o efeito de transição. O segundo valor, é a duração, 2s..flipbtn seletor, vamos usar .flipBtnWrapper: hover .flipBtn. Como mencionado anteriormente, também altere o valor de rotateX () para -180 graus para fazer o botão virar. .flipBtn transição: transformar 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
:verificado em vez de :flutuar, Desta forma, se comporta mais como um botão real. Eu também incluí quatro botões diferentes com quatro direções de flip (superior → inferior, inferior → superior, direita → esquerda e esquerda → direita), para que você possa usar facilmente o que você.
