CSS Transform und Keyframes mit PHP-Skript als polygone Galerie
Funktioniert nicht im IE11 oder älteren IE-Versionen
Gefunden bei: the-art-of-web.com
Vielen Dank an Werner-Zenk.de für die Bearbeitung der CSS und des PHP Skriptes. Unten als dauerhaft rotierende Polygon mit Halt durch Mausüber.
NOF-Seite auf die Dateierweiterung .php stellen. Diese Style-Anweisung habe ich hier “Zwischen Head Tags” des Layouts. Die Geschwindigkeit (Dauer der Animation) könnt Ihr einstellen (hier 30 Sekunden für eine 360° Drehung). Die Pausen zwischen dem Rotieren sind auf 5 der Gesamtzeit eingestellt.
<!-- Style rotierndes Polygon -->
<style>
#stage {
margin: 10em auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;
}
#spinner5 {
animation-name:spinner5;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:30s;
transform-style: preserve-3d;
}
/* Mouseover deaktiviert (andere Geschwindigkeit) */
/* #spinner5:hover {
animation-name: spinner5;
animation-iteration-count:infinite;
animation-duration: 10s;
transform-style: preserve-3d;
} */
#spinner5 img {
position: absolute;
border: 1px solid #fff;
background: rgba(255,255,255,1.0);
box-shadow: 0 0 6px 2px rgba(0,0,0,0.4);
border-radius: 5px;
}
@keyframes spinner5 {
from,15% {
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
20%,35% {
-moz-transform: rotateY(-72deg);
-ms-transform: rotateY(-72deg);
transform: rotateY(-72deg);
}
40%,55% {
-moz-transform: rotateY(-144deg);
-ms-transform: rotateY(-144deg);
transform: rotateY(-144deg);
}
60%,75% {
-moz-transform: rotateY(-216deg);
-ms-transform: rotateY(-216deg);
transform: rotateY(-216deg);
}
80%,95% {
-moz-transform: rotateY(-288deg);
-ms-transform: rotateY(-288deg);
transform: rotateY(-288deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
</style>
Das PHP-Skript gehört in den HTML-Code Editor eines Textfeldes. Ich habe hier 12 Fotos, mit den Dateinamen 01.jpg bis 12.jpg (160 x 107 Pixel), verwendet. Diese Fotos werden aufgrund dieser Zahlen als Dateiname in eine “for” Schleife im Skript automatisch gefunden. Bei mir liegen diese Fotos direkt in dem Verzeichnis, in dem sich auch diese PHP-Seite befindet.
<?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("*.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(160/$num))));
echo '<div id="stage" style="width: ' . $maxw . 'px; height: ' . $maxh . 'px;">';
echo '<div id="spinner5">';
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: rotateY(' . round($rotation, 1) . 'deg) translateZ(' . $radius . 'px); padding: ' .
$padh . 'px ' . $padw . 'px;" src="' . $img . '" ' . $size[$i][3] . ' alt="">';
$rotation += 360 / $num;
}
echo '</div></div>';
?>
Hier noch als Beispiel ein dauerhaft rotierendes Polygon, das durch Mausüber anhält
Tippe am Smartphone (außer z.Zt. am iPhone) auf die Galerie zum Stoppen und auf den Hintergrund zum Starten
Die CSS:
<!-- Style rotierndes Polygon ohne Pausen -->
<style>
@-webkit-keyframes spinner2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
}
}
#stage2 {
margin: 1em auto;
-webkit-perspective: 1200px;
cursor: wait;
}
#spinner2 {
-webkit-animation-name: spinner2;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
-webkit-transform-style: preserve-3d;
}
#spinner2:hover {
-webkit-animation-play-state: paused;
}
#spinner2 img {
position: absolute;
border: 1px solid #fff;
background: rgba(255,255,255,1.0);
box-shadow: 0 0 6px 2px rgba(0,0,0,0.4);
border-radius: 5px;
}
</style>
Das Skript:
<?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("*.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(160/$num))));
echo "<div id=\"stage2\" style=\"width: {$maxw}px; height: {$maxh}px;\">\n";
echo "<div id=\"spinner2\">\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: rotateY(",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";
?>
