Inicio Informática Tarjeta 3D de presentación que se gira y muestra tus redes sociales

Tarjeta 3D de presentación que se gira y muestra tus redes sociales

Utiliza solo HTML y CSS3

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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.

tarjeta 3d de presentación parte delantera

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.

tarjeta 3d de presentación parte trasera

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.