JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:300px; width:200px; margin:300px 180px 0 0; float:left; display:inline-block;">
<div id="stage" style="padding-left: 9px; height: 180px;">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
<img style="-webkit-transform: rotateX(0deg) translateX(180px); background:#333; padding: 0 0 0 160px;" src="images/beach1.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-90deg) translateX(180px); background:#999; padding: 0 0 0 147px;" src="images/beach2.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-180deg) translateX(180px); background:#000; padding: 0 0 0 120px;" src="images/beach3.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-270deg) translateX(180px); background:#f90; padding: 0 0 0 147px;" src="images/beach4.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-360deg) translateX(180px); background:#f00; padding: 0 0 0 122px;" src="images/beach5.jpg" width="200" height="200" alt="">
</div>
</div>
</div>

<div style="height:300px; width:200px; margin:300px 0 0 0; float:left; display:inline-block;">
<div id="stage" style="padding-left: 9px; height: 180px;">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
<img style="-webkit-transform: rotateX(0deg) translateX(180px); background:#333; padding: 0 0 0 160px;" src="images/beach1.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-90deg) translateX(180px); background:#999; padding: 0 0 0 147px;" src="images/beach2.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-180deg) translateX(180px); background:#000; padding: 0 0 0 120px;" src="images/beach3.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-270deg) translateX(180px); background:#f90; padding: 0 0 0 147px;" src="images/beach4.jpg" width="200" height="200" alt="">
<img style="-webkit-transform: rotateX(-360deg) translateX(180px);...

CSS

#spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  }
  @-webkit-keyframes spinner5 { 
    5%,35%  { -webkit-transform: rotateX(0deg);  }
    40%,55%  { -webkit-transform: rotateX(-90deg); }
    60%,75%  { -webkit-transform: rotateX(-180deg); }
    80%,95%  { -webkit-transform: rotateX(-270deg); }
    to       { -webkit-transform: rotateX(-360deg); }
  }

  @keyframes spinner5 {
    5%,35%  {
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }
    40%,55%  {
      -moz-transform: rotateX(-90deg);
      -ms-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
    }
    60%,75%  {
      -moz-transform: rotateX(-180deg);
      -ms-transform: rotateX(-180deg);
      transform: rotateX(-180deg);
    }
    80%,95%  {
      -moz-transform: rotateX(-270deg);
      -ms-transform: rotateX(-270deg);
      transform: rotateX(-270deg);
    }
    to {
      -moz-transform: rotateX(-360deg);
      -ms-transform: rotateX(-360deg);
      transform: rotateX(-360deg);
    }
  }
  #spinner {
    -webkit-animation-name: spinner5;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;

    animation-name: spinner5;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

JavaScript

<?PHP
  // Original PHP code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  $size = array();
  $rotation = $maxw = $maxh = 0;

  // identify images to display
  $dirlist = glob("images/beach*.jpg");
  $num = count($dirlist);

  // calculate the largest image dimensions
  for($i=0; $i < $num; $i++) {
    $img = $dirlist[$i];
    $size[$i] = getimagesize($img);
    if($size[$i][0] > $maxw) $maxw = $size[$i][0];
    if($size[$i][1] > $maxh) $maxh = $size[$i][1];
  }
  
  // display the rotating polygon
  $radius = floor($maxw / (2 * tan(deg2rad(180/$num))));
  echo "<div id=\"stage\" style=\"width: {$maxw}px; height: {$maxh}px;\">\n";
  echo "<div id=\"spinner\">\n";
  for($i=0; $i < $num; $i++) {
    $img = $dirlist[$i];
    $padw = ($maxw - $size[$i][0]) / 2;
    $padh = ($maxh - $size[$i][1]) / 2;
    echo "<img style=\"-webkit-transform: rotateX(",round($rotation, 1),"deg) translateZ({$radius}px); padding: {$padh}px {$padw}px;\" src=\"$img\" {$size[$i][3]} alt=\"\">";
    $rotation += 360 / $num;
  }
  echo "</div>\n";
  echo "</div>\n";
?>