Author: | kitjenson |
---|---|
Views Total: | 284 views |
Official Page: | Go to website |
Last Update: | May 20, 2024 |
License: | MIT |
Preview:

Description:
This is a simple 3D cube carousel that supports auto-rotation and pauses when hovered over. Built with HTML, CSS/CSS3, and a little bit of JavaScript, it also allows users to manually navigate through images with next and previous buttons.
This 3D carousel provides a fancy way to showcase a set of images, perfect for showcasing product collections, portfolio items, or even as a dynamic visual element for your website. The auto-rotation feature keeps the display engaging, while the pause-on-hover functionality allows users to focus on a particular image.
How to use it:
1. Build the HTML for the carousel. This structure defines the main container, the image cube itself (containing individual image divs), and the buttons for manual navigation.
<div class="container"> <div class="image-cube"> <div class="front"></div> <div class="right"></div> <div class="back"></div> <div class="left"></div> </div> <div class="btns"> <button id="prev"><</button> <button id="next">></button> </div> </div>
2. The necessary CSS/CSS3 styles.
- Define the root variables for the primary color and rotation speed.
- Reset default styles and set up the layout with flexbox.
- Style the container and cube, applying the necessary 3D transformations and transitions.
- Position and style the individual cube faces using background images.
- Style the next/prev buttons and apply the reflection effect.
:root { --color-primary: dimgray; --rotation-speed: 1s; } * { padding: 0; margin: 0; box-sizing: border-box; } html { min-height: 100vh; display: grid; place-items: center; } body { background: linear-gradient(to top, #222, #ddd); } .container { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; perspective: 800px; perspective-origin: 50%; } .image-cube { width: 300px; height: 300px; transform-style: preserve-3d; position: relative; transition: var(--rotation-speed); } .image-cube div { height: 300px; width: 300px; position: absolute; background-size: cover; background-position: 50% 50%; border: 3px solid white; -webkit-box-reflect: below -3px linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,0.15)); } .front { transform: translateZ(150px); } .right { transform: rotateY(-270deg) translateX(150px); transform-origin: 100% 0; } .back { transform: translateZ(-150px) rotateY(180deg); } .left { transform: rotateY(270deg) translateX(-150px); transform-origin: 0 50%; } .btns { position: absolute; display: flex; justify-content: space-between; width: 405px; pointer-events: none; } .btns button { background-color: transparent; color: #ffffff; border: 3px solid #ffffff; background: var(--color-primary); border-radius: 50%; font-size: 20px; cursor: pointer; width: 40px; height: 40px; box-shadow: 0 3px 5px rgba(0,0,0,.5); pointer-events: all; }
3. Add your own images to the carousel.
.front { background-image: url('https://source.unsplash.com/zgZjXqeyZVI/2400x1600'); } .right { background-image: url('https://source.unsplash.com/tXiMrX3Gc-g/2400x1600'); } .back { background-image: url('https://source.unsplash.com/p0ZvBVpW3KY/2400x1600'); } .left { background-image: url('https://source.unsplash.com/u6JG0eYjcEU/2400x1600'); }
4. Activate the carousel.
let con = document.querySelector('.container'), cube = document.querySelector(".image-cube"), btnNext = document.getElementById("next"), btnPrev = document.getElementById("prev"), switch_delay = 3000; //milliseconds let pos = 0; btnNext.addEventListener("click", () => { pos -= 90; cube.style.transform = `rotateY(${pos}deg)`; }); btnPrev.addEventListener("click", () => { pos += 90; cube.style.transform = `rotateY(${pos}deg)`; }); function autoClick() { pos -= 90; cube.style.transform = `rotateY(${pos}deg)`; } autoClick(); let autoRun = setInterval(autoClick, switch_delay); //pause on mouseover con.addEventListener('mouseenter', function(){ clearInterval(autoRun); }); //restart on mouseleave con.addEventListener('mouseleave', function(){ autoRun = setInterval(autoClick, switch_delay); });