Rotate 3d style images using css php

Images rotating around the vertical axis - similar to a slide projector

//CSS

<style type="text/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); 
} </style>

//HTML

<div id="stage" style="padding-left: 180px; height: 160px;"> <div id="spinner" style="-webkit-transform-origin: 180px 0 0;"> <img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="images/beach1.jpg" width="200" height="160" alt=""> <img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="images/beach2.jpg" width="213" height="160" alt=""> <img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/beach3.jpg" width="240" height="160" alt=""> <img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="images/beach4.jpg" width="213" height="160" alt=""> <img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="images/beach5.jpg" width="238" height="160" alt=""> </div> </div>

//PHP

<?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 carousel html echo "<div id=\"stage\" style=\"padding-left: ",($maxw*3/4),"px; height: {$maxh}px;\">\n"; echo "<div id=\"spinner\" style=\"-webkit-transform-origin: ",($maxw*3/4),"px 0 0;\">\n"; for($i=0; $i < $num; $i++) { $img = $dirlist[$i]; $padleft = ($maxw - $size[$i][0]); $padh = ($maxh - $size[$i][1]) / 2; echo "<img style=\"-webkit-transform: rotateY(-",round($rotation,1),"deg) translateX(",($maxw*3/4),"px); padding: {$padh}px 0 {$padh}px ",($padleft + $maxw/2),"px;\" src=\"$img\" {$size[$i][3]} alt=\"\">\n"; $rotation += 360 / $num; } echo "</div>\n"; echo "</div>\n\n";

      ?>