Close

Profile Card UI with Pure 3D Flip Image

This is an example of a bootstrap animated profile card layout with hover effects, designed using HTML, CSS, and bootstrap framework 4. The images and icons are imported to the code with their URLs. Media queries have been used to increase the responsiveness of the form. The body of the form is given width as 100vw, height as 100vh, filter as blur (30px), and transform as scale(1.1). The profile card is designed using the CSS grid. The profile section is given the styles of transform-style as preserve-3d, transition as all 1s ease-in-out, and transition-delay as 0.1s. The profile image has the styles of border-radius as 50% to get the circular shape and cursor as pointer to get the hand cursor effect. In a hover event, the image takes a transform effect of rotateY(180deg) to display the backside icons. The font-family for content is given as 'Oswald', sans-serif. The bottom and right sections are given a text-transform style as uppercase to automatically convert the text to uppercase, whereas the icons on the right section turn their color to hsl(0, 0%, 20%), in a hover event. Source: https://codepen.io/CrackAll/pen/abzjQwv

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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