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!
