3D transforms and perspective can be a great trick to add depth and texture to any website but they're tricky to get right. They can easily look skewed, too flat or distorted if you don't use a fitting perspective or go overboard on the angles.

Still, there are sites out there that make excellent use of 3D transforms to make their pages more vibrant and visually interesting. For example, here's Modulz:

3D Transform 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);
}

We've been collecting these in a new resource: Beautiful CSS 3D Transform examples. We've taken examples from Framer, MagicPattern, Polypane and other websites, simplified them and placed them side-by-side with their CSS.

Each example comes with a Copy CSS button that lets you easily copy over the CSS that creates the 3D effect. These examples are great startingpoints for you to create your own beautiful CSS 3D transforms and when you do, reach out and we'll add them to the list!

Build your next project with Polypane

  • All plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Back to blog
Before you leave...

Join thousands of devs getting tips and tricks on building better websites.

  • Be the first to know when we launch new CSS resources and web development and design tools.