Image carousel rotation illusion using html css and javascript-JS Tutorial-php.cn

Image carousel rotation illusion using html css and javascript

Mary-Kate Olsen

Release： 2024-11-07 14:05:03

Original

407 people have browsed it

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>

Copy after login

The above is the detailed content of Image carousel rotation illusion using html css and javascript. For more information, please follow other related articles on the PHP Chinese website!