A Pen by Saminou yengue kizidi.

index.html

<p>Move the mouse cursor over this space :) (best viewed in full page)</p>
<ul class='tiles'>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
  <li class='tile'></li>
</ul>
<div class='slider'></div>

Playing-with-SASS:-tiles-on-an-icosagon-in-the-xOz-plane.markdown

Playing with SASS: tiles on an icosagon in the xOz plane

My second ever SASS pen. :)

Answer to this SO question:

http://stackoverflow.com/q/15121273/1397351

A Pen by Saminou yengue kizidi on CodePen.

License.

script.js

(function(){
  var b = document.body;
  
  b.addEventListener('mousemove', function(e) {
    var w = b.clientWidth, x = e.clientX, 
        perc = x/w, 
        full_angle = -126, 
        to_angle = full_angle + (100 - perc)*full_angle, 
        txt = 'rotateY(' + to_angle + 'deg)', 
        prefixes = ['Webkit', 'Moz', /*'ms', 'O', */''], 
        len = prefixes.length, 
        property = 'Transform',
        a = document.querySelector('.tiles'), 
        s = document.querySelector('.slider');
    for(var i = 0; i < len; i++) {
      if(prefixes[i] == '')
        property = property.toLowerCase();
      a.style[prefixes[i] + property] = txt;
    }
    s.style.backgroundPosition = (perc*100 - .5) + '% 50%';
  }, false);
}());

style.sass

@import "compass"
$tileSide: 20em
$backgrounds: "http://imgsrc.hubblesite.org/hu/db/images/hs-2007-16-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2007-19-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2012-01-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2006-01-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2003-11-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2006-10-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2005-12-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2008-24-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2006-30-b-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2006-14-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2011-17-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2011-11-a-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2011-15-b-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2009-02-d-web.jpg", "http://imgsrc.hubblesite.org/hu/db/images/hs-2009-25-l-web.jpg"
html, body
  height: 100%
body
  overflow: hidden
  perspective: 2.5*$tileSide
  background: dimgrey
  color: white
  font: 1.25em century gothic, verdana, sans-serif
.tiles 
  position: absolute
  top: 50%
  left: 50%
  padding: 0
  width: 0
  height: 0
  list-style: none
  transform-style: preserve-3d
  transform: rotateY(-126deg)
.tile 
  position: absolute
  left: 50%
  margin: .45em $tileSide/(-2)
  width: $tileSide
  height: $tileSide
  backface-visibility: hidden
  opacity: .5
  &:hover
    opacity: 1
  &:nth-child(odd)
    bottom: 100%
  $angle: 18 /* outer angle of an icosagon */
  /* inradius of an icosagon */
  $inRadius: $tileSide*(1 + sqrt(5) + sqrt(5 + 2*sqrt(5)))/2
  $translateVal: $inRadius*1.05 /* space them out a bit */
  @for $i from 1 to 9
    &:nth-child(#{2*$i}), &:nth-child(#{2*$i - 1})
      transform: rotateY(#{$angle*($i - 1)}deg) translateZ(-$translateVal)
  $c: 1  
  @each $bg in $backgrounds
    &:nth-child(#{$c})
      background: url(#{$bg})
      background-size: cover
    $c: $c + 1
  cursor: pointer  
  transition: .5s
.slider
  position: absolute
  bottom: 5%
  left: 10%
  height: .25em
  width: 80%
  opacity: .5
  background: grey linear-gradient(90deg, crimson 100%, transparent 100%) no-repeat
  background-size: 5% 100%