Cómo crear una carta interactiva con efecto 3D para Blogger

Hoy vamos a preparar este pequeño rincón para tu blog. No necesitas saber programación; solo un poco de paciencia, una taza de té y unos minutos para personalizar tu espacio.

Dificultad: Fácil - Intermedia
Tiempo aproximado:10 minutos
Necesitas: Un blog en Blogger + dos imágenes

Antes de empezar

Esta carta está creada únicamente con HTML y CSS, por lo que no necesita scripts externos ni complementos adicionales. La magia del efecto ocurre gracias a una transformación 3D llamada rotateY, que permite que un elemento gire sobre su eje como una tarjeta real.

Paso 1: Preparar las imágenes

La carta utiliza dos imágenes:

• 🌸 Imagen frontal: la portada de la carta.
• ✉️ Imagen trasera: el interior donde aparece el mensaje.

Recomiendo, luego de descargarla, subirla a alguna plataforma como Imagur(https://imgur.com/upload) para que sea mas fácil copiar el link de la imagen en el código.

Para cambiarlas solo debes buscar estas partes:

.carta-frente{

  background-image:url("URL-DE-TU-IMAGEN");

}

y:

.carta-dorso{

  background-image:url("URL-DE-TU-IMAGEN");

}

Después reemplazas las URLs (parte resaltada) por los links de las imagenes que quieras utilizar.

Paso 2: Crear el espacio de la carta

Esta parte define el tamaño:

.carta-widget{

  width:100%;

  max-width:320px;

  height:210px;

}

Puedes modificar:

• max-width → ancho de la carta.
• height → altura.

Ejemplo:

max-width:400px;
height:250px;

Hará una carta más grande.

Paso 3: El efecto de giro
La animación está creada aquí:

.carta-widget:hover .carta{
  transform:rotateY(180deg);
}

hover significa que el efecto ocurre cuando el cursor pasa por encima.
rotateY(180deg) indica que la carta gira 180 grados sobre un eje vertical.

Puedes cambiar la velocidad aquí:
transition:transform .9s;

Por ejemplo:
transition:transform 1.5s;
Hará que el giro sea más lento.

Paso 4: Cambiar los textos
El texto del frente está aquí:

<div class="frente-texto">
  Tu texto aquí
</div>

Y el mensaje interior aquí:

<div class="dorso-texto">
  Tu mensaje aquí
</div>

Paso 5: Instalarlo en Blogger
Entra al panel de Blogger.

Ve a Diseño.

Pulsa Añadir un gadget.

Selecciona HTML/Javascript.

Pega todo el código, no borres ningún espacio.

Guarda los cambios.

La carta aparecerá en la zona donde hayas colocado el gadget.

Puedes cambiar la fuente
Busca:
font-family:"Georgia",serif;
Puedes cambiarla por otra fuente instalada o añadir una de Google Fonts.

 Ideas para usar este gadget

Carta de bienvenida al blog.
"Sobre mí" interactivo.

Mensaje secreto para lectores.

Tarjeta de cumpleaños.

Invitación digital.

Separador decorativo.

La historia detrás del gadget 

Esta carta nació como una pequeña forma de convertir un rincón del blog en algo más personal. A veces un detalle pequeño puede hacer que una página deje de sentirse como una página y empiece a sentirse como un lugar.

Código

<style>

.carta-widget{

  width:100%;

  max-width:320px;

  height:210px;

  perspective:1200px;

  margin:10px auto;

}

/* Giro */

.carta-widget:hover .carta{

  transform:rotateY(180deg);

}

.carta{

  width:100%;

  height:100%;

  position:relative;

  transform-style:preserve-3d;

  transition:transform .9s cubic-bezier(.4,.2,.2,1);

}

/* Caras */

.carta-face{

  position:absolute;

  width:100%;

  height:100%;

  border-radius:16px;

  overflow:hidden;

  backface-visibility:hidden;

  box-shadow:0 10px 25px rgba(0,0,0,.15);

}

/* Frente */

.carta-frente{

  background-image:url("https://i.imgur.com/cOei7SK.jpeg");

  background-size:cover;

  background-position:center;

}

/* Dorso */

.carta-dorso{

  background-image:url("https://i.imgur.com/mQnvLcK.jpeg");

  background-size:cover;

  background-position:center;

  transform:rotateY(180deg);

}

/* Capa para escribir */

.carta-texto{

  position:absolute;

  top:0;

  left:0;

  width:100%;

  height:100%;

  padding:22px;

  box-sizing:border-box;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  font-family:"Georgia",serif;

}

/* Texto del frente */

.frente-texto{

  color:#ffffff;

  font-size:18px;

  line-height:1.5;

  text-shadow:0 2px 5px rgba(0,0,0,.45);

}

/* Texto del dorso */

.dorso-texto{

  color:#5a4a42;

  font-size:15px;

  line-height:1.7;

  text-shadow:0 1px 1px rgba(255,255,255,.45);

}

</style>

<div class="carta-widget">

    <div class="carta">

        <!-- Frente -->

        <div class="carta-face carta-frente">

            <div class="carta-texto frente-texto">

                Tu texto aquí

            </div>

        </div>

        <!-- Dorso -->

        <div class="carta-face carta-dorso">

            <div class="carta-texto dorso-texto">

                Tu texto aquí<br /><br />

                

            </div>

        </div>

    </div>

</div>

Hasta el próximo rincón creativo.
— Mañanas Lentas