Close

3D carousel

This is an example of a bootstrap web form with a carousel feature with 3D animations, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and videos are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. CSS @keyframes is used to implement the animations in CSS. The body of the form is given a style set of overflow as hidden, display as flex, background as #111, perspective as 1000px, and a transform-style as preserve-3d. The spin container is given a transforming effect of rotate (-10deg). The carousel items are given a style set of position as absolute, width and height as 100%, line-height as 200px, font-size as 50px, box-shadow as 0 0 8px #fff, and box-reflect as below 10px linear-gradient(transparent, transparent, #0005). In a hover event, the items take a box-shadow effect of 0 0 15px #fffd, and a -box-reflect effect of below 10px linear-gradient(transparent, transparent, #0007). The header in the middle of the carousel is given a font-family style as Serif, and color as #fff. The auto-rotate option is set as true, and the rotation speed is defined as 60s in JavaScript, along with the radius of the carousel set as 240. Source: https://codepen.io/greggo/pen/BayrerV

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.