Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make 3D wave animation using HTML & CSS
    HTML & CSS

    How to make 3D wave animation using HTML & CSS

    Coding StellaBy Coding Stella10 May 2024No Comments4 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a 3D wave animation using only HTML and CSS. This project will simulate a wave-like motion in a three-dimensional space, adding depth and visual interest to the webpage.

    We’ll achieve this effect by utilizing CSS animations and transformations to manipulate the elements and create the illusion of a wave.

    Let’s dive into building the 3D wave animation. Whether you’re a beginner or an experienced developer, this project offers a fascinating exploration of CSS techniques to bring dynamic motion to your web designs. Let’s make waves on the web!

    HTML :

    This HTML code creates a webpage with a 3D wave animation. It includes a container with items, each displaying a background image. These images likely contribute to the animation effect.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title> 3D wave animation </title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="wrapper">
      <div class="items">
        <div class="item" tabindex="0" style="background-image: url(/Images/1.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/2.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/3.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/4.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/5.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/6.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/7.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/8.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/9.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/10.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/11.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/12.avif)"></div>
        <div class="item" tabindex="0" style="background-image: url(/Images/13.avif)"></div>
          
        </div>
          
        </div>
    <!-- partial -->
      
    </body>
    </html>

    CSS :

    This CSS code creates a 3D wave animation effect for a webpage. It styles elements to form a grid of items with hover effects that create a wave-like motion. The items expand and rotate when hovered over or clicked, giving the impression of a dynamic, three-dimensional surface.

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    :root{
        --index: calc(1vw + 1vh);
        --transition: cubic-bezier(.1, .7, 0, 1);
    }
    
    body{
        background-color: #282A36;
    }
    
    .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    
    .items{
        display: flex;
        gap: 0.4rem;
        perspective: calc(var(--index) * 35);
    }
    
    .item{
        width: calc(var(--index) * 3);
        height: calc(var(--index) * 12);
        background-color: #222;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        filter: grayscale(1) brightness(.5);
        transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
        will-change: transform, filter, rotateY, width;
    }
    
    .item::before, .item::after{
        content: '';
        position: absolute;
        height: 100%;
        width: 20px;
        right: calc(var(--index) * -1);
    }
    
    .item::after{
        left: calc(var(--index) * -1);
    }
    
    .items .item:hover{
        filter: inherit;
        transform: translateZ(calc(var(--index) * 10));
    }
    
    /*Right*/
    
    .items .item:hover + *{
        filter: inherit;
        transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
        z-index: -1;
    }
    
    .items .item:hover + * + *{
        filter: inherit;
        transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
        z-index: -2;
    }
    
    .items .item:hover + * + * + *{
        filter: inherit;
        transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
        z-index: -3;
    }
    
    .items .item:hover + * + * + * + *{
        filter: inherit;
        transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
        z-index: -4;
    }
    
    
    /*Left*/
    
    .items .item:has( + :hover){
        filter: inherit;
        transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
    }
    
    .items .item:has( + * + :hover){
        filter: inherit;
        transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
    }
    
    .items .item:has( + * + * + :hover){
        filter: inherit;
        transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
    }
    
    .items .item:has( + * + * + * + :hover){
        filter: inherit;
        transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
    }
    
    .items .item:active, .items .item:focus {
    	width: 28vw;
    	filter: inherit;
    	z-index: 100;
    	transform: translateZ(calc(var(--index) * 10));
        margin: 0 .45vw;
    }

    In short, crafting a 3D wave animation using HTML and CSS has been an engaging exploration of creative web design. Through CSS animations and transformations, we’ve brought the illusion of a dynamic wave to life on the webpage. This project offers valuable insights into the capabilities of CSS for creating captivating visual effects, making it an exciting endeavor for both beginners and experienced developers alike.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Heart Rate Animation Part 1 using HTML & CSS
    Next Article How to make Smooth Parallax Scrolling Cards using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to create Solar System Explorer using HTML and CSS

    31 July 2025
    HTML & CSS

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    HTML & CSS

    How to create Cat Loading Animation using HTML and CSS

    23 July 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202421K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202420K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202418K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to create Tab Bar Navigation using HTML CSS and JS

    9 July 2025

    How to create Personal Portfolio using HTML CSS & JavaScript

    23 January 2025

    How to make Password Generator in HTML CSS & JavaScript

    16 February 2024

    How to make Flip A Coin using HTML CSS & JavaScript

    11 April 2024
    Latest Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with đź’™ by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood