<div class="container">
  <div class="grid">
    <div class="text-component">
      <h1>3D Perspective</h1>
      <p>Learn how to create a 3D space in CSS.</p>
    </div>

    <figure class="td-figure">
      <img 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>
/* -------------------------------- 

šŸ’” 3D Perspective in CSS
šŸ”— https://codyhouse.co/nuggets/3d-perspective

-------------------------------- */

.td-figure {
  perspective: 1500px;
}

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

.td-figure:hover img {
  transform: rotate(0);
}

/* demo stuff */
body {
  padding: 4rem 0;
}

.container {
  width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}

.grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.text-component {
  text-align: center;
}

.text-component h1 {
  margin-bottom: 0.75rem;
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .text-component {
    text-align: left;
  }
}

External CSS

  1. https://codepen.io/codyhouse/pen/PoaqJWp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.