Close

Profile card with rotating animation

This is an example of a profile card with rotating animation, designed using JavaScript, html, CSS, and Bootstrap framework 4. The user profile picture is imported to the code with its URL. The body of the form is given a background color of rgb(255, 255, 255), and a font color of rgb(0, 0, 0). JavaScript methods have been used to implement the flipping animation on hover. The profile card is given a transform-style as preserve-3d. The front side and the back side of the card is given separate styles. Both front and back sides are given a box shadow of 0px 1px 10px -2px rgba(0,0,0,0.43). The header section is given a background color of #d32f2f, box-shadow style of 0px 10px 20px 0px rgba(0,0,0,0.43), and transform style of translateY(-25px). The profile name is displayed using a font-size of 30px. In a hover event, the card takes a transform effect of translateY(-100%) rotateY(180deg), to create the rotate animation. Source: https://mdbootstrap.com/snippets/jquery/tomekmakowski/346089#js-tab-view

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.