THRIVE THEMES
VÍDEOTUTORIAL

Voltear elementos en Thrive Architect

Lección 9 Capítulo 2

Hoy te voy a enseñar a voltear elementos en Thrive Architect gracias a un poco de CSS.
Ahora me dirás, ¿voltear elementos? ¿Y eso para qué sirve?
Pues la verdad que no sirve para mucho, pero como Thrive Architect no lo lleva de serie dentro de las animaciones y yo soy un chico muy curioso te lo voy a enseñar.

¿Porqué se me ocurrió crear este tip para voltear elementos en Thrive Architect?

Pues fue casualidad.
Esta semana hablando con un posible cliente para Páginas en Blanco, me mostró la página web verysentir.com y en la página "sobre mi" vi este efecto que te voy a mostrar más abajo.
En un principio no me llamó la atención, pero luego pensé: este efecto no se puede hacer en Thrive Architect con sus animaciones.
Y de ahí este tip que te voy a mostrar a continuación.

Pasos para voltear un elemento en Thrive Architect

Antes de enseñarte el código CSS que he utilizado te voy a nombrar los elementos que he añadido y como los he montado.
1ª parte:
El primer elemento es un content box al que le he puesto la imagen de manos de background y el color negro de fondo con una opacidad del 50%, y en el hover he cambiado la imagen por la del padre con el niño.
A continuación he añadido un elemento texto "Mi As de la manga más personal" y he puesto en el content box que tenga posición centrada.
Además he añadido un botón al que le he dado opacidad del 0% en su versión normal y el 100% en el hover para que se visualice cuando el usuario ponga el cursor sobre la imagen.
2ª parte:
Una vez añadidos todos los elementos me toca añadir el código CSS para que dichos elementos hagan el efecto de volcar.
El código es el siguiente:

@keyframes rotate {from {transform: rotatex(0deg);}
to {transform: rotatex(180deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotatex(0deg);}
to {-webkit-transform: rotatex(180deg);}}
.voltear:hover{
-webkit-animation: 1s rotate linear;
animation: 1s rotate linear;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

Mi "As de la manga" más personal
¿Sabías que nací con superpoderes?

Dicho código utiliza la propiedad rotate que es la que hace la animación para rotar o volcar el elemento.
En esta ocasión he utilizado la versión rotatex para que el movimiento de la animación sea vertical.
Si quisiéramos que fuera el movimiento en horizontal sólo tendríamos que cambiar la x por y.
Este código tendrás que colocarlo en la zona de Custom CSS que encuentras en el menú izquierda pinchando en la rueda dentada.
Una vez colocado verás que no hace nada, ya que tendrás que ir al Content Box y añadirle la clase "voltear".
Esto se hace seleccionando el content box y yendo a HTML Atributes en el menú izquierdo.
Escribes voltear en el recuadro de la Class y listo.
Por cierto, en el código he puesto que la animación se realice en un segundo para se haga rápido y que el giro sea de 180 grados.
Si quieres que la animación se realice más lenta o el giro no sea el mismo sólo tienes que jugar con esos parámetros.

Conclusión

Como ves con un pequeño código podremos hacer efectos de rotación muy atractivos.
Ahora sólo tienes que coger el código y modificarlo a tu gusto para conseguir animaciones como la que te he mostrado.
Si te ha servido el tip y quieres que te muestre más propiedades CSS con las que hacer animaciones como las de este tutorial sólo tienes que dejarme un comentario más abajo.
Espero que te hoy hayas aprendido algo nuevo.
Un abrazo!!

Pen
>

Aprende a utilizar los plugins Thrive Architect de manera profesional