Close

3D accordion (simple folding paper effect)

This is another example of an accordion layout with 3D paper folding effect, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images are imported to the code with their URLs, whereas JavaScript functions have been used to implement the paper folding effect. The body of the form is given the styles of background-color as #202B2E, display as flex, justify-content as center, align-items as center, height as 100vh, and font-family as 'IM Fell French Canon'. The background color of the Details section is set as White. A transform-style for the accordion is given as preserve-3d to help get the 3D effects. The cursor style for the image card is given as pointer to get the hand cursor effect. The image card displays the card title with a border-bottom style as 2px solid #D8303D, and changes the opacity to 1, in a hover effect. The card title is given a transition of all .4s ease-in-out, whereas the card details section is given the styles of color as white, font-style as italic, padding-top as 10px, font-weight as 400, and transition as all .5s ease-in-out .2s. Source: https://codepen.io/paweltar/pen/EyVrmm

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.