<main>
  <div id="board">
    <div id="dragon">
      <div id="floor"></div>
      <div id="wall"><div></div></div>
      <img src="https://user-images.githubusercontent.com/1911623/72899809-855fcb80-3d05-11ea-8b36-cc9857e898da.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899813-87298f00-3d05-11ea-9ff9-f701c5d78735.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899815-87c22580-3d05-11ea-9031-037beea785fd.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899816-885abc00-3d05-11ea-8651-c76aa4fe34cd.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899821-8a247f80-3d05-11ea-8107-c1c02f7f1a03.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899850-9d374f80-3d05-11ea-9ddb-0b6821116f46.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899878-a7f1e480-3d05-11ea-9d59-7e3a9935af06.png" />
      <img src="https://user-images.githubusercontent.com/1911623/72899881-a9bba800-3d05-11ea-99e1-199787aee4c3.png" />
    </div>
  </div>
</main>
:root {
  --dragon-width: 200px;
  --dragon-height: 300px;
  --perspective: 800px;
}

@media screen and (min-width: 768px) {
  :root {
    --perspective: 1000px;
  }
}

@media screen and (min-width: 1300px) {
  :root {
    --perspective: 1300px;
  }
}

main {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  perspective-origin: calc(50vw - 7.5px) calc(30vh - 7.5px);
  perspective: var(--perspective);
}

#board {
  width: calc(200vw - 15px - 15px - var(--dragon-width));
  height: calc(200vh - 15px - 15px - var(--dragon-height));
  transform-style: preserve-3d;
}

#dragon {
  position: absolute;
  width: var(--dragon-width);
  height: var(--dragon-height);
  box-sizing: border-box;
  position: absolute;
  left: calc(100vw - 15px - var(--dragon-width));
  top: calc(100vh - 15px - var(--dragon-height));
  transform-style: preserve-3d;
}

#floor {
  position: absolute;
  background: rgb(35, 101, 99);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 500px;
  height: 300px;
  box-sizing: border-box;
  transform-style: preserve-3d;
  transform-origin: left top;
  transform: matrix3d(
    1, 0, 0, 0,
    0, 6.12323e-17, 1, 0,
    0, -1, 6.12323e-17, 0,
    -130, 342, -180, 1
  );
}

#wall {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  width: 500px;
  height: 300px;
  transform-style: preserve-3d;
  transform-origin: left top;
  transform: matrix3d(
    1, 0, 0, 0, 
    0, 1, 0, 0, 
    0, 0, 1, 0, 
    -130, 43, -180, 1
  );
}

#wall > div {
  background: rgb(133, 45, 97);
  height: 500px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

img {
  transform-style: preserve-3d;
  transform-origin: left top;
  position: absolute;
}

#dragon :nth-child(9) {
  transform: matrix3d(
    0.735087, -0.138895, 0.663593, 0,
    -0.134671, 0.929371, 0.343705, 0,
    -0.664463, -0.34202, 0.664463, 0, 
    24.7565, 128.742, -135.545, 1
  );
}
#dragon :nth-child(10) {
  transform: matrix3d(
    0.652565, 0.460263, -0.601928, 0, 
    -0.132714, 0.851526, 0.507239, 0, 
    0.74602, -0.251122, 0.616759, 0, 
    138.03, 106.871, -32.0231, 1
  );
}
#dragon :nth-child(8) {
  transform: matrix3d(
    0.736895, -0.151858, 0.658729, 0, 
    -0.124395, 0.927341, 0.352937, 0, 
    -0.664463, -0.34202, 0.664463, 0, 
    16.4498, 68.2397, -174.993, 1
  );
}
#dragon :nth-child(7) {
  transform: matrix3d(
    0.226631, -0.874709, -0.428396, 0, 
    0.737545, 0.441396, -0.511075, 0, 
    0.636134, -0.200136, 0.74517, 0, 
    73.4304, 10.3127, -3.35224, 1
  );
}
#dragon :nth-child(3) {
  transform: matrix3d(
    0.0893148, -0.926528, -0.365469, 0, 
    0.635338, 0.335587, -0.695505, 0, 
    0.767052, -0.170078, 0.618631, 0, 
    -45.9631, 140.754, -75.463, 1
  );
}
#dragon :nth-child(4) {
  transform: matrix3d(
    0.727398, -0.369714, 0.578104, 0, 
    0.686182, 0.383525, -0.618112, 0, 
    0.00680717, 0.846298, 0.532666, 0, 
    -46.9534, 94.0875, -99.5306, 1
  );
}
#dragon :nth-child(5) {
  transform: matrix3d(
    0.360813, -0.927188, -0.100681, 0, 
    0.668278, 0.332329, -0.665554, 0, 
    0.650553, 0.172858, 0.739528, 0, 
    18.1251, 66.476, -44.7441, 1
  );
}
#dragon :nth-child(6) {
  transform: matrix3d(
    0.73827, -0.152879, 0.656952, 0, 
    0.663176, 0.342287, -0.665611, 0, 
    -0.123108, 0.927075, 0.354086, 0, 
    31.0674, 22.0792, -46.3465, 1
  );
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.