<section class="position-relative z-index-1 padding-y-xl">
  <div class="container max-width-adaptive-lg">
    <div class="grid gap-md items-center">
      <div class="col-6@md">
        <div class="text-component text-center text-left@md">
          <h1>3D Perspective</h1>
          <p>Learn how to create a 3D space in CSS.</p>
        </div>
      </div>
    
      <div class="col-6@md">
        <figure class="td-figure">
          <img class="block width-100%" src="https://images.unsplash.com/photo-1603695454344-12df53ab0c11?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
        </figure>
      </div>
    </div>
  </div>
</section>
// 💡 CSS Nugget: 3D Perspective in CSS
// ℹī¸ Learn how to create a 3D space in CSS
// 🔗 https://codyhouse.co/nuggets/3d-perspective

.td-figure {
  perspective: 1500px;
  
  img {
    transform: rotateX(10deg) rotateY(-18deg) rotateZ(3deg);
    border-radius: 0.25em;
    box-shadow: 2px 10px 30px hsla(0, 0%, 0%, 0.25);
    transition: .3s;
  }

  &:hover img {
    transform: rotate(0);
  }
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.