DEV Community

Cover image for 3d Image carousel rotation illusion using html css and javascript
Prince
Prince

Posted on

3d Image carousel rotation illusion using html css and javascript

code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Carousel</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #0d0d0d;
        overflow: hidden;
        transition: background-image 0.5s ease;
        background-size: cover;
        background-position: center;

    }

    /* Carousel Container */
    .carousel {
        position: relative;
        width: 130px;
        height: 130px;
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 1s;
    }

    /* Image Styles */
    .carousel img {
        position: absolute;
        height: 100%;
        width: 100%;
        /* width: 150px;
        height: 150px; */
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(255, 110, 199, 0.3);
        transform-origin: center;
        transition: transform 0.5s, filter 0.5s;
        opacity: 0.8;
    }

    /* Position each image around the Y-axis */
    .carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
    .carousel img:nth-child(2) { transform: rotateY(72deg) translateZ(150px); }
    .carousel img:nth-child(3) { transform: rotateY(144deg) translateZ(150px); }
    .carousel img:nth-child(4) { transform: rotateY(216deg) translateZ(150px); }
    .carousel img:nth-child(5) { transform: rotateY(288deg) translateZ(150px); }

    /* Control Icons */
    .controls {
        position: absolute;
        bottom: 20px;
        left: 20px;
        display: flex;
        gap: 10px;
    }
    .controls button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border: none;
        background-color: #181616;
        color: #fff;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.3s;
    }
    .controls button:hover {
        background-color: #555;
    }
</style>
</head>
<body>

<div class="carousel" id="carousel">
    <img src="nature1.jpg" alt="Image 1">
    <img src="nature2.jpg" alt="Image 2">
    <img src="nature3.jpg" alt="Image 3">
    <img src="nature4.jpeg" alt="Image 4">
    <img src="nature5.jpg" alt="Image 5">
</div>

<div class="controls">
    <button onclick="rotateCarousel(-1)">⬅️</button>
    <button onclick="rotateCarousel(1)">➡️</button>
</div>

<script>
    let angle = 0;
    let currentIndex = 0;
    const images = document.querySelectorAll('.carousel img');
    const backgroundImages = [
        'nature1.jpg', 'nature2.jpg', 'nature3.jpg', 'nature4.jpeg', 'nature5.jpg'
    ];

    function rotateCarousel(direction) {
        angle += direction * 72;  // 72 degrees for a 5-image ring
        document.getElementById("carousel").style.transform = `rotateY(${angle}deg)`;

        // Update index to find the current front image
        currentIndex = (currentIndex - direction + images.length) % images.length;
        updateImageFocus();
    }

    function updateImageFocus() {
        // Reset all images to default opacity and brightness
        images.forEach((img, index) => {
            img.style.filter = "brightness(0.4)";
            img.style.opacity = "0.7";
        });

        // Highlight the current front-facing image
        images[currentIndex].style.filter = "brightness(1.5)";
        images[currentIndex].style.opacity = "1";

        // Update background to match the current image
        document.body.style.backgroundImage = `url(${backgroundImages[currentIndex]})`;
    }

    // Initialize focus on the first image
    updateImageFocus();
</script>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)