Postagem para Blogspot: Cubo 3D Giratório com Animações GIF

 Cubo 3D Giratório - Um Efeito Visual Impressionante para Seu Blog

Introdução:
Olá leitores! Hoje trago um efeito visual incrível para enriquecer o design do seu blog: um cubo 3D que gira continuamente, mostrando diferentes animações GIF em cada face. Este elemento é perfeito para criar um destaque especial, seja para anúncios, galerias ou simplesmente para impressionar seus visitantes com algo diferente e moderno.

O que é este efeito?
Trata-se de um cubo tridimensional criado com CSS3 e HTML que realiza uma rotação suave e contínua. Cada face do cubo exibe uma animação GIF diferente, criando uma experiência visual dinâmica e atraente. O cubo possui dimensões otimizadas (210x175px) para se encaixar perfeitamente em sidebars ou áreas de conteúdo.

Como usar no seu Blogspot:

1. Acesse o painel administrativo do seu blog

2. Vá em "Layout" ou "Tema"

3. Adicione um novo gadget/widget "HTML/JavaScript"

4. Cole o código completo abaixo:

html

<div class="clever-core-ads">
  <div class="cube-scene">
    <a href="SUA_URL_AQUI" target="_blank" rel="nofollow" class="cube-link"></a>

    <div class="cube">
      <div class="face front"><img src="https://64.media.tumblr.com/a1c1f4614b1c56c49d2b1c25217b4a74/tumblr_nsvri6xqxx1ux1dn3o2_r1_500.gif" alt="Animação 1" /></div>
      <div class="face right"><img src="https://64.media.tumblr.com/1f39dbfd3b342d2983ad06e502fdc55b/tumblr_nsvrdp7dCU1ux1dn3o2_r1_500.gif" alt="Animação 2" /></div>
      <div class="face back"><img src="https://i.pinimg.com/originals/4c/98/33/4c98331f8d1b7544e7492a7bf76ab3fb.gif" alt="Animação 3" /></div>
      <div class="face left"><img src="https://64.media.tumblr.com/1f39dbfd3b342d2983ad06e502fdc55b/tumblr_nsvrdp7dCU1ux1dn3o2_r1_500.gif" alt="Animação 4" /></div>
    </div>
  </div>
</div>

<style>
.cube-scene{
  width:210px;height:175px;margin:auto;position:relative;perspective:700px;
}
.cube-link{position:absolute;inset:0;z-index:50;display:block;}
.cube{
  width:100%;height:100%;position:relative;transform-style:preserve-3d;
  animation:rotateCube 8s infinite linear;
}
.face{
  position:absolute;width:210px;height:175px;overflow:hidden;
  backface-visibility:hidden;
}
.face img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* metade de 210px = 105px */
.front{transform:rotateY(0deg) translateZ(105px);}
.right{transform:rotateY(90deg) translateZ(105px);}
.back {transform:rotateY(180deg) translateZ(105px);}
.left {transform:rotateY(-90deg) translateZ(105px);}

@keyframes rotateCube{
  0%{transform:rotateY(0deg);}
  25%{transform:rotateY(-90deg);}
  50%{transform:rotateY(-180deg);}
  75%{transform:rotateY(-270deg);}
  100%{transform:rotateY(-360deg);}
}
</style>

Personalização:

• Alterar link: Substitua SUA_URL_AQUI pelo URL desejado

• Trocar GIFs: Modifique os links das imagens nas tags <img src="...">

• Redimensionar: Altere os valores de width e height proporcionalmente

• Velocidade: Modifique 8s na animação para girar mais rápido ou mais devagar

Funcionalidades:

• ✅ Link clicável em todo o cubo

• ✅ Animações suaves em CSS puro

• ✅ Compatível com a maioria dos navegadores modernos

• ✅ Design responsivo (ajusta-se ao container)

• ✅ Otimizado para performance

Aplicações práticas:

• Destaque para produtos ou serviços

• Galeria de trabalhos/portfólio

• Chamada para ação especial

• Elemento decorativo interativo

• Apresentação de categorias do blog

Dica profissional:
Para melhor experiência do usuário, recomendo usar GIFs com cores e temas semelhantes, criando uma transição harmoniosa entre as faces do cubo.

Conclusão:
Este cubo 3D é uma adição elegante e moderna para qualquer blog. Além de visualmente atraente, é funcional e pode direcionar tráfego para onde você precisar. Experimente implementá-lo e veja como seus visitantes reagirão a esse elemento dinâmico!

Compartilhe sua experiência!
Implementou o cubo no seu blog? Compartilhe nos comentários como ficou e quais personalizações você fez. Adoraria ver as diferentes formas criativas de usar este efeito!

Créditos:
Desenvolvido com técnicas avançadas de CSS3 3D Transforms e Animations.

---

Nota: Certifique-se de que as imagens GIF utilizadas tenham direitos de uso adequados para sua aplicação específica.