VOLVER
MENÚ

CAMBIAR TAMAÑO

Cambia el tamaño de un contenedor div al pasar el cursor.
Este efecto se logra mediante el uso de la propiedad Scale. En el ejemplo del lado derecho el cuadrado se hace más grande.
Ejemplo
VER HTML 
               
    <div class="cuadrado">
      <h1> Ejemplo </h1>
    </div>
VER CSS 
                 
.cuadrado {
  width: 100px;
  height: 100px;
  background: #091D36;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
}
.cuadrado:hover{
  transform: scale(2);
}

GIRA TARJETA

Efecto de tarjeta girando al pasar el cursor
Este efecto se logra mediante el uso de la propiedad transform con su atributo rotateY, además del preserve-3d que le da un efecto realista a la animación

Ejemplo

VER HTML 
               
   <div class="tarjeta-wrap">
    <div class="tarjeta">
      <div class="adelante"></div>
      <div class="atras">
        <p>Ejemplo</p>
      </div>
    </div>
   </div>
VER CSS 
                 
.tarjeta{
  width: 100px;
  height: 100px;
  background: var(--base);
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s ease;
  transition: .7s ease;
}
.adelante, .atras{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.adelante{
  width: 100%;
}
.atras{
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-family: "open sans";
    background: var(--text);
}
.tarjeta-wrap:hover .tarjeta{
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

CAMBIA COLOR

Cambiarle el color a un div para hacerlo más llamativo.
Este efecto se logra mediante el uso de la propiedad animation y con @keyframes, en el ejemplo los colores van cambiando en porcentajes pero se puede hacer también con to y from.

Ejemplo

VER HTML 
               
   <div class="ejemploColor">
        <p>Ejemplo</p>
   </div>
VER CSS 
                 
.ejemploColor{
  width: 100px;
  height: 100px;
  background: var(--base);
  animation:  cambiaColor 5s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 5rem;
}

@keyframes cambiaColor{
  10%{ background: #0952AD; }
  30%{ background: #09AD9C; }
  50%{ background: #09AD4F; }
  60%{ background: #5BAD09; }
  80%{ background: #09AD9C; }
  90%{ background: #0952AD; }
}

CAMBIA FORMA

Cambiarle de forma un div, de estar completo que se haga un medio circulo hasta desaparecer.
Este efecto se logra mediante el uso de clip-path con el atributo circle y dandole coordenadas, puede llegar a ser muy interesante dentro de un menú

Ejemplo

VER HTML 
               
   <div class="ejemploForma">
        <p>Ejemplo</p>
   </div>
VER CSS 
                 
.ejemploForma{
  width: 100px;
  height: 100px;
  transition: 2s;
  clip-path: circle(141.2% at 100% 0);
  background: var(--base);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 5rem;
}
.ejemploForma:hover{
  clip-path: circle(0.0% at 100% 0);
}

MOVER ELEMENTO

Hacer un div absoluto tomando como partida su padre y moverlo de un lado a otro.
Este efecto se logra mediante el uso de la propiedad animation y con @keyframes, en el ejemplo el div va cambiando con to y from, pero pueden usarse también porcentajes.

Ejemplo

VER HTML 
               
    <div class="ctn-ejemploMover">
      <div class="ejemploMover">
        <p>Ejemplo</p>
      </div>
    </div>
VER CSS 
                 
.ctn-ejemploMover{
  position: relative;
    margin: 5rem;
}
.item-mover .ejemploMover{
  width: 100px;
  height: 100px;
  animation: infinite mover 2s ease;
  background: var(--baseOscuro);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
  right: 0;

}
@keyframes mover{
  to{
    right: 0;
  }
  from{
    right: 50%;

  }
}