Code snippet for generating CSS animation code to rotate seven elements around a center point.

Avatar Animation

<?php
 
$steps = array();
$steps[1] = 'top: 0px; left: 0px;';
$steps[2] = 'top: 0px; left: 85px;';
$steps[3] = 'top: 0px; left: 170px;';
$steps[4] = 'top: 170px; left: 170px;';
$steps[5] = 'top: 170px; left: 85px;';
$steps[6] = 'top: 170px; left: 0px;';
$steps[7] = 'top: 85px; left: 0px;';
 
$avatars = array(
1 => array( 1, 2, 3, 4, 5, 6, 7 ),
2 => array( 2, 3, 4, 5, 6, 7, 1 ),
3 => array( 3, 4, 5, 6, 7, 1, 2 ),
4 => array( 4, 5, 6, 7, 1, 2, 3 ),
5 => array( 5, 6, 7, 1, 2, 3, 4 ),
6 => array( 6, 7, 1, 2, 3, 4, 5 ),
7 => array( 7, 1, 2, 3, 4, 5, 6 ),
);
 
for ( $i = 0; $i < count( $avatars ); $i++ ) {
$percentages[] = round( 100 / ( count( $avatars ) ) ) * ( $i );
?>
.team-avatars a:nth-child(<?php echo $i+1; ?>) {
	<?php echo $steps[$i+1]; ?>
	-moz-animation-name: avatar<?php echo $i+1; ?>;
	-webkit-animation-name: avatar<?php echo $i+1; ?>;
	-animation-animation-name: avatar<?php echo $i+1; ?>;
}

<?php
}
 
foreach ( array( "-moz-", "-webkit-", "" ) as $prefix ) {
foreach ( $avatars as $avatar => $_steps ) {
?>
@<?php echo $prefix; ?>keyframes avatar<?php echo $avatar; ?> {
<?php
foreach ( $_steps as $percentage => $step ) {
?> <?php echo $percentages[$percentage]; ?>% { <?php echo $steps[$step]; ?> }
<?php }
?> 100% { <? echo $steps[$avatar]; ?> }
}
<?php }
}