<div class="outer">
  <div class="card"></div>
</div>
:root {
  --bg-img: url(https://miro.medium.com/max/12032/0*__5nhm_2qHSrTVoZ);
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100vh;
  background-color: hsl(222,50%,60%);
}

.card {
  width: 45vmin;
  height: 30vmin;
  background-image: var(--bg-img);
  background-size: 100% 100%;
  
  /* Make sure this element can exist in 3d space */
  transform-style: preserve-3d;
  
  transform:
    /* Set the point of view */
    perspective(850px)
    /* Transform the element in all 3 dimensions */
    rotateX(20deg)
    rotateY(20deg)
    rotateZ(-20deg)
    /* Transform the element over the Z axis */
    translateZ(5vmin);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.