Skip to contentSkip to footer

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);
}
Codepen

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);
  }
}
Codepen

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);
  }
}
Codepen

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);
  }
}
Codepen

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;
}
Codepen

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);
  }
}
Codepen

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);
  }
}
Codepen

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);
  }
}
Codepen

3D Transform #9 by Framer

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

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);
  }
}
Codepen

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);
    }
  }
}
Codepen

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);
  }
}
Codepen

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;
  }
}
Codepen
Kilian

Hi! 👋 I'm Kilian.

I'm the founder, developer, designer and support team at Polypane. Nice to meet you!

I've built close to 200 websites over the past decade, while continuously creating tools and libraries to improve my workflow. Polypane started as a prototype after getting frustrated that I always had to resize my browser. When I started using the prototype, I was shocked. I was instantly 60% faster compared to just using Chrome.

And it's not just me. People keep telling me how much more efficient they are with Polypane. 2 times, 3 times, some even 5 times as efficient!

That's why I continue to develop Polypane. To help devs and designers create the best web experiences they can, through a browser that puts them first. Give it a try!

— Kilian Valkhof

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot