Skip to main content

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.