Tabla de contenido
Una vez más aquí. Como sigo a vueltas con el Covid y recuperándome de mis cosas, pues voy a dejar algo publicado que próximamente utilizaré en esta misma página web (si es que no se me olvida). Se trata de una tarjeta 3d de presentación, que al girarse muestre las redes sociales, y la cual se puede crear utilizando solo HTMK y CSS3. Esto es algo parecido al juego de parejas que publiqué hace ya unos años, aun que en aquel caso se usaba JavaScript.
Si alguien no lo tiene claro qué es una tarjeta 3D de presentación, decir que estas se pueden encontrar en todo tipo de formas y tamaños. Pero las tarjetas comunes incluirán información como un título, un nombre de usuario, una imagen y varios íconos. A veces en estas se puede mostrar un pequeño texto para aclarar una cosa u otra.

En las siguientes líneas vamos a ver cómo crear una tarjeta, la cual en principio no va a mostrar ninguna animación o efecto 3D, pero cuando pasemos el ratón sobre esta tarjeta, esta se va a girar 180 grados haciendo uso de una visualización 3D.

Si tienes conocimientos básicos de HTML y CSS, también puedes crear este tipo de tarjetas CSS con animación 3D. No necesitarás mucho código, tan solo darle alguna vuelta a la propiedad CSS transform.
Tarjeta 3D de presentación
Para crear tu propia tarjeta 3d de presentación que al girarse muestre tus redes sociales, será necesario crear dos archivos. En el primero vamos a maquetar la tarjeta utilizando HTML, y el otro es un archivo CSS en el que le aplicaremos todas las reglas necesarias. Después de crear estos archivos, simplemente pega los siguientes códigos en su respectivo archivo y cambiar lo que creas conveniente.
Archivo index.html
Como decía, en el archivo .html, al que llamaremos index.html, vamos a pegar el siguiente código para crear una página estática que muestre la información que a nos interese. el código será el siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Tarjeta 3D</title> <link rel="stylesheet" href="style.css"> <!--Las reglas de estilo--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/><!--Cargamos font-awesome para los iconos de redes--> <link rel="icon" type="image/png" sizes="16x16" href="logo.png"><!--el favicon--> </head> <body> <div class="center"> <div class="delantera"><!--parte delantera de la tarjeta--> <div class="contenido delant"> <p> ENTREUNOSYCEROS </p> <span>Conozcámonos más</span> </div> </div> <div class="trasera"><!--parte trasera de la tarjeta--> <div class="contenido tras"> <h2> #entreunosyceros </h2> <span>Sígueme</span> <div class="iconos"> <!--redes sociales--> <a href="https://facebook.com/entreunosyceros" alt="Facebook entreunosyceros" target="_blank"><i class="fab fa-facebook-f"></i></a> <a href="https://twitter.com/entreunosyceros" alt="Twitter entreunosyceros" target="_blank"><i class="fab fa-twitter"></i></a> <a href="https://www.youtube.com/channel/UC3lN--gsvOs2kMpl7wJLfmA" alt="Youtube entreunosyceros" target="_blank"><i class="fab fa-youtube"></i></a> <a href="https://instagram.com/entreunosyceros" alt="Instragran entreunosyceros" target="_blank"><i class="fab fa-instagram"></i></a> <a href="https://github.com/sapoclay" alt="Github entreunosyceros" target="_blank"><i class="fab fa-github"></i></a> </div> <span>en redes sociales</span> </div> </div> </div> </body> </html>
Archivo Style.css
En segundo lugar necesitaremos crear un archivo CSS con el nombre de style.css (que es el que se usa en el anterior código). Dentro vamos a pegar el siguiente código:
* { margin: 0; padding: 0; box-sizing: border-box; } /*Fondo*/ body { height: 100vh; font-family: 'Montserrat', sans-serif; background: -webkit-linear-gradient(155deg, #8720af, #ec2d30, #661985, #e22c2f); } .center, .delantera, .contenido, .trasera { position: absolute; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); height: 400px; width: 290px; transform-style: preserve-3d; perspective: 1000px; } .delantera, .trasera { height: 100%; width: 100%; text-align: center; background: url(entreunosyceros.jpeg); background-size: cover; background-position: center; transform: translateY(0deg); border-radius: 10px; backface-visibility: hidden; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .3, .2, 1); } .contenido { left: 0%; top: 50%; width: 100%; perspective: 1000px; transform: translateY(-50%) translateZ(60px) scale(0.94); } .delant p { font-size: 25px; margin-bottom: 15px; color: white; font-weight: bold; } .delant span { font-size: 20px; color: white; } .delant p:after { content: ''; display: block; left: 0; right: 0; width: 100px; height: 2px; background: white; margin: 0 auto; margin-top: 10px; } .tras .iconos:before, .tras .iconos:after{ content: ''; display: block; left: 0; right: 0; width: 100px; height: 2px; background: white; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } .trasera { transform: rotateY(180deg); background: url(entreunosyceros.jpeg); background-size: cover; background-position: center; } .tras { color: rgb(185, 185, 185); } .tras h2 { font-size: 25px; padding-bottom: 5px; color:white } .tras span { font-size: 25px; } .iconos { margin: 10px 0; display: block; } i.fab { color: #042f4b; font-size: 20px; height: 40px; width: 40px; background: white; border-radius: 50%; margin: 0 5px; line-height: 40px; cursor: pointer; } /*Giro*/ .center:hover>.trasera { transform: rotateY(0deg); } .center:hover>.delantera { transform: rotateY(-180deg); } /*Redes sociales*/ .fa-facebook-f:hover { background-color: rgb(17, 0, 255); color: white; } .fa-twitter:hover { background-color: rgb(0, 140, 255); color: white; } .fa-youtube:hover { background-color: rgb(219, 0, 0); color: rgb(255, 255, 255); } .fa-instagram:hover { background-color: rgb(193, 53, 132); color: white; } .fa-github:hover { background-color: rgb(116, 116, 116); color: white; }
Con este código podrás crear tu propia tarjeta 3D de presentación, aun que tendrás que cambiar las imágenes de que aparecen en el código y poner las tuyas propias. Se puede ver funcionando este ejemplo en el siguiente enlace.