3D Hover-triggered Wave Effect With Pure CSS/CSS3

Category: Animation , CSS & CSS3 | April 11, 2024
Author:HighFlyer
Views Total:76 views
Official Page:Go to website
Last Update:April 11, 2024
License:MIT

Preview:

3D Hover-triggered Wave Effect With Pure CSS/CSS3

Description:

This is a pretty cool CSS-powered hover effect that allows you to create a 3D wave animation effect on a list of elements when hovering over.

It uses CSS and the :hover selector to achieve the animation. Each element in the list is styled with a grayscale filter and reduced brightness. When hovered over, the element’s filter is removed, returning it to its original colors, and its size and position are adjusted using transform and translateZ. The surrounding elements are also affected, with their size and rotation changing based on their proximity to the hovered element.

How to use it:

1. To achieve the 3D wave animation, we structure our HTML with a parent div class named .items, containing multiple child div with the class .item. Each item represents an element in the wave.

<div class="items">
  <div class="item" tabindex="0">Item 1</div>
  <div class="item" tabindex="0">Item 2</div>
  <div class="item" tabindex="0">Item 3</div>
  ... more items here ...
</div>

2. The CSS for `.items` sets up a flex display and applies a perspective based on the item’s index, enhancing the 3D effect. Individual .item elements are styled with specific widths, heights, background properties, and transition effects for a smooth animation.

:root{
  --index: calc(1vw + 1vh);
  --transition: cubic-bezier(.1, .7, 0, 1);
}
.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;
}

You Might Be Interested In:


Leave a Reply