CSS Tip

3D parallax effect on images

Add a fancy 3D effect to your image with a simple code

A 3D effect to your image

img {
  --f: .1; /* the parallax factor (the smaller the better) */
  --r: 10px; /* radius */
  
  --_f: calc(100%*var(--f)/(1 + var(--f)));
  --_a: calc(90deg*var(--f));
  width: 250px; /* the image size */
  aspect-ratio: calc(1 + var(--f));
  object-fit: cover;
  clip-path: inset(0 var(--_f) 0 0 round var(--r));
  transform: perspective(400px) var(--_t,rotateY(var(--_a)));
}
img:hover {
  clip-path: inset(0 0 0 var(--_f) round var(--r));
  --_t:translateX(calc(-1*var(--_f))) rotateY(calc(-1*var(--_a)))
}

See the Pen 3D parallax effect on hover by Temani Afif (@t_afif) on CodePen.

More detail: smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images

More CSS Tips