Rotating numbers

by seven_phases_max

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<div id="carousel">
    <figure>1</figure>
    <figure>2</figure>
    <figure>3</figure>
    <figure>4</figure>
    <figure>5</figure>
    <figure>6</figure>
    <figure>7</figure>
    <figure>8</figure>
    <figure>9</figure>
</div>

CSS

@sides: 9;
.loop(@sides);

.loop (@index) when (@index > 0) {
    #carousel figure:nth-child(@{index}){
        transform: rotateY((360deg/@sides*@index))
     };

     .loop((@index - 1));
}

figure {
    font-size: 300%;
    font-weight: bold;
    width: 2em;
    margin: 0;
}

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type','text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();