// https://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375 //configuration //todo: put them in $carousels list $hurl : "../img/processed/horizontal"; $vurl : "../img/processed/vertical"; //hard coded, not configurable $carousels : rotateY rotateX; $SPRITES_COUNT : 4; $Z_INDEX : 182000000, 159500000, 137000000, 159500000, 200000000, 170000000, 140000000, 170000000; .view_port { position: relative; padding: 0px; margin: auto; top: 80px; background-color: #000000; width: 1020px; height: 800px; perspective: 900px; perspective-origin: 400px 400px; overflow: visible; color: white; } .sprite-0 { position: absolute; background-color: transparent; background-size: cover; border-radius: 15px; color: white; height: 300px; width: 450px; margin: 0px; padding: 0px; left: 0px; top: 0px; /*. sprite rotates over this point */ transform-origin: 225.0000000000px 0.0000000000px -225.0000000000px; } .sprite-1 { position: absolute; background-color: transparent; background-size: cover; border-radius: 15px; color: white; height: 600px; width: 400px; margin: 0px; padding: 0px; left: 600px; top: 0px; /*. sprite rotates over this point */ transform-origin: 0.0000000000px 300.0000000000px -300.0000000000px; } @for $cars from 0 through 1 { @for $count from 0 through ( $SPRITES_COUNT - 1 ) { #sprite-#{$cars}-#{$count} { background-image: url("#{$hurl}/numbered/0-#{$count}.jpg"); -webkit-animation: 80s linear 0s infinite normal move_sprite_#{$cars}_#{$count}; animation: 80s linear 0s infinite normal move_sprite_#{$cars}_#{$count}; } $angle-step : 360deg / $SPRITES_COUNT; $phase-step : 100% / $SPRITES_COUNT; @keyframes move_sprite_#{$cars}_#{$count} { @for $phase from 0 through $SPRITES_COUNT { $abs-phase : $count + $phase; $effect-phase : $abs-phase % $SPRITES_COUNT; $z-index : nth( $Z_INDEX, 1 + $effect-phase + $cars * $SPRITES_COUNT ); //$z-index : 10000000 * ( $SPRITES_COUNT - $effect-phase / 2 ); $angle : $abs-phase * $angle-step; $rotation : nth( $carousels, ( $cars + 1 ) ); $rotation : unquote( $rotation + "(" + $angle + ")" ); #{ $phase-step * $phase } { transform: #{$rotation}; z-index: $z-index; } } } } }