Beautiful CSS 3D Transform Examples

CSS 3D transforms create depth and visually interesting elements on your page using perspective. Copy over the examples and make them your own!

All the examples below have just a single div, so they're easy to implement in your own project, fill with a background color or HTML content. Examples made with Polypane, the browser for developers and designers.

3D Transform #1 by Modulz

shadow

div {
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

3D Transform #2 by MagicPattern

hovershadow

div {
  transform: perspective(1500px) rotateY(15deg);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;

  &:hover {
    transform: perspective(3000px) rotateY(5deg);
  }
}

3D Transform #3 by Cloudflare

hovershadow

div {
  transform:
    rotate3d(.5,-.866,0,15deg)
    rotate(1deg)
  box-shadow:
    2em 4em 6em -2em rgba(0,0,0,.5),
    1em 2em 3.5em -2.5em rgba(0,0,0,.5);
  transition:
    transform .4s ease,
    box-shadow .4s ease;
  border-radius: .5em;

  &:hover {
    transform:
      rotate3d(0,0,0,0deg)
      rotate(0deg);
  }
}

3D Transform #4 by Polypane

hovershadow

div {
  transform:
    perspective(800px)
    rotateY(-8deg);
  transition: transform 1s ease 0s;
  border-radius: 4px;
  box-shadow:
    rgba(0, 0, 0, 0.024) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px,
    rgba(0, 0, 0, 0.03) 0px 0px 8px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 30px 0px;

  &:hover {
    transform: perspective(800px) rotateY(-4deg);
  }
}

3D Transform #5 by Wozber

shadow

div {
  transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-16deg)
    rotateZ(4deg);
  box-shadow: 24px 16px 64px 0 rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

3D Transform #6 by Draftbit

hovershadow

div {
  transform:
    rotateX(51deg)
    rotateZ(43deg);
  transform-style: preserve-3d;
  border-radius: 32px;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    .4s ease-in-out transform,
    .4s ease-in-out box-shadow;

  &:hover {
    transform:
      translate3d(0px, -16px, 0px)
      rotateX(51deg)
      rotateZ(43deg);
    box-shadow:
      1px 1px 0 1px #f9f9fb,
      -1px 0 28px 0 rgba(34, 33, 81, 0.01),
      54px 54px 28px -10px rgba(34, 33, 81, 0.15);
  }
}

3D Transform #7 by Feyapp

hover

div {
  transform:
    perspective(2000px)
    translate3d(0px, -66px, 198px)
    rotateX(-55deg)
    scale3d(0.86, 0.75, 1)
    translateY(50px);
  border-radius: 5px;
  will-change: transform;
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: scale3d(1, 1, 1);
  }
}

3D Transform #8 by DocSpo

hovershadow

div {
  transform:
    perspective(750px)
    translate3d(0px, 0px, -250px)
    rotateX(27deg)
    scale(0.9, 0.9);
  border-radius: 20px;
  border: 5px solid #e6e6e6;
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: translate3d(0px, 0px, -250px);
  }
}

3D Transform #9 by Framer

div {
  transform:
    perspective(600px)
    rotateX(20deg);
  border-radius: 6px;
}

3D Transform #10 by akhil_001 on CodePen

hovershadow

div {
  transform:
    perspective(900px)
    rotateX(60deg)
    scale(0.7);
  box-shadow: 0px 20px 100px #555;
  transition:0.5s ease all;

  &:hover {
    transform:
      rotate(0deg)
      scale(1)
      translateY(10px);
  }
}

3D Transform #11 by Augmented UI

hovershadow

div {
  transform:
    scale(0.75)
    rotateY(-30deg)
    rotateX(45deg)
    translateZ(4.5rem);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.25);
  transition: 0.6s ease transform;

  &:hover {
    transform: scale(1);
  }

  &::before {
    transform: translateZ(4rem);
    &:hover {
      transform: translateZ(0);
    }
  }

  &::after {
    transform: translateZ(-4rem);
    &:hover {
      transform: translateZ(-1px);
    }
  }
}

3D Transform #12 by Flip by Pqina

hovershadow

div {
  border-radius: 1em;
  perspective: 600px;
  box-shadow:
    0 0.125em 0.3125em rgba(0, 0, 0, 0.25),
    0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);

  &::before {
    border-radius: 0 0 1em 1em;
    width: 100%;
    height: 50%;
    transform-origin: center top;
    transform: rotateX(180deg);
    background: #333232
      linear-gradient(180deg,
                      rgba(0, 0, 0, 0.1) 50%,
                      rgba(0, 0, 0, 0.4));
    transition: 0.7s ease-in-out transform;
  }

  &:hover::before {
    transform: rotateX(0);
  }
}

3D Transform #13 by hqdrone on CodePen

hover

div {
  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  filter: blur(2px);
  opacity: 0.5;
  transition: 0.6s ease all;

  &:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

Honorable mention by Rodrigo Pombo.

This isn't a single div so it doesn't fit the list, but this visual illusion using CSS transform is a lot of fun. Scroll around and see how the dragon keeps looking at you.

Have more examples?

We'll keep updating this list as we find new and interesting CSS 3D transform and perspective examples. If you find one in the wild, let us know on Twitter by sending a message to @polypane!