/*
 * I made up an icosahedron with only css triangles
 * Positionning is handled by a sass @for loop
 * A nice hover effect 
*/
.spin {
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg) rotateX(-20deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateX(-20deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0deg) rotateX(-20deg);
  }
  to {
    -moz-transform: rotateY(360deg) rotateX(-20deg);
  }
#demo2 ul{
  display: inline-block;
  list-style: none;
  margin: 10px 10px;
}
section{
  clear:both;
  overflow:hidden;
}
section h1{
  text-align:center;
  color: #fff;
  padding: 20px 0 0 0;
}

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

/* DEMO 2 / 3*/
.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}
}
.icosahedron-wraper {
  -moz-transform: rotate(-29deg) rotateX(0deg);
  -ms-transform: rotate(-29deg) rotateX(0deg);
  -webkit-transform: rotate(-29deg) rotateX(0deg);
  transform: rotate(-29deg) rotateX(0deg);
  -webkit-perspective: 2500px;
  -moz-perspective: 2500px;
}

.icosahedron {
  width: 198px;
  height: 198px;
  margin: 220px auto 0;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  outline: 1px solid lavender;
}
.icosahedron [class^="triangle-"] {
  position: absolute;
  top: 0;
  width: 0px;
  height: 0px;
  border-left: 104.21053px solid transparent;
  border-right: 104.21053px solid transparent;
  border-bottom: 198px solid #2b9679;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.icosahedron .triangle-21 {
  border-bottom-color: lavender;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.icosahedron .triangle-1 {
  -moz-transform: rotateY(-72deg) rotateX(-45deg) translateZ(-99px);
  -ms-transform: rotateY(-72deg) rotateX(-45deg) translateZ(-99px);
  -webkit-transform: rotateY(-72deg) rotateX(-45deg) translateZ(-99px);
  transform: rotateY(-72deg) rotateX(-45deg) translateZ(-99px);
  top: -99px;
}
.icosahedron:hover .triangle-1 {
  top: -198px;
}
.icosahedron .triangle-2 {
  -moz-transform: rotateY(-144deg) rotateX(-45deg) translateZ(-99px);
  -ms-transform: rotateY(-144deg) rotateX(-45deg) translateZ(-99px);
  -webkit-transform: rotateY(-144deg) rotateX(-45deg) translateZ(-99px);
  transform: rotateY(-144deg) rotateX(-45deg) translateZ(-99px);
  top: -99px;
}
.icosahedron:hover .triangle-2 {
  top: -198px;
}
.icosahedron .triangle-3 {
  -moz-transform: rotateY(-216deg) rotateX(-45deg) translateZ(-99px);
  -ms-transform: rotateY(-216deg) rotateX(-45deg) translateZ(-99px);
  -webkit-transform: rotateY(-216deg) rotateX(-45deg) translateZ(-99px);
  transform: rotateY(-216deg) rotateX(-45deg) translateZ(-99px);
  top: -99px;
}
.icosahedron:hover .triangle-3 {
  top: -198px;
}
.icosahedron .triangle-4 {
  -moz-transform: rotateY(-288deg) rotateX(-45deg) translateZ(-99px);
  -ms-transform: rotateY(-288deg) rotateX(-45deg) translateZ(-99px);
  -webkit-transform: rotateY(-288deg) rotateX(-45deg) translateZ(-99px);
  transform: rotateY(-288deg) rotateX(-45deg) translateZ(-99px);
  top: -99px;
}
.icosahedron:hover .triangle-4 {
  top: -198px;
}
.icosahedron .triangle-5 {
  -moz-transform: rotateY(-360deg) rotateX(-45deg) translateZ(-99px);
  -ms-transform: rotateY(-360deg) rotateX(-45deg) translateZ(-99px);
  -webkit-transform: rotateY(-360deg) rotateX(-45deg) translateZ(-99px);
  transform: rotateY(-360deg) rotateX(-45deg) translateZ(-99px);
  top: -99px;
}
.icosahedron:hover .triangle-5 {
  top: -198px;
}
.icosahedron .triangle-6 {
  -moz-transform: rotateY(-432deg) rotateX(-45deg) translateZ(99px);
  -ms-transform: rotateY(-432deg) rotateX(-45deg) translateZ(99px);
  -webkit-transform: rotateY(-432deg) rotateX(-45deg) translateZ(99px);
  transform: rotateY(-432deg) rotateX(-45deg) translateZ(99px);
  top: 99px;
  border-bottom: none;
  border-top: 198px solid #0de621;
}
.icosahedron:hover .triangle-6 {
  top: 198px;
}
.icosahedron .triangle-7 {
  -moz-transform: rotateY(-504deg) rotateX(-45deg) translateZ(99px);
  -ms-transform: rotateY(-504deg) rotateX(-45deg) translateZ(99px);
  -webkit-transform: rotateY(-504deg) rotateX(-45deg) translateZ(99px);
  transform: rotateY(-504deg) rotateX(-45deg) translateZ(99px);
  top: 99px;
  border-bottom: none;
  border-top: 198px solid #0de621;
}
.icosahedron:hover .triangle-7 {
  top: 198px;
}
.icosahedron .triangle-8 {
  -moz-transform: rotateY(-576deg) rotateX(-45deg) translateZ(99px);
  -ms-transform: rotateY(-576deg) rotateX(-45deg) translateZ(99px);
  -webkit-transform: rotateY(-576deg) rotateX(-45deg) translateZ(99px);
  transform: rotateY(-576deg) rotateX(-45deg) translateZ(99px);
  top: 99px;
  border-bottom: none;
  border-top: 198px solid #0de621;
}
.icosahedron:hover .triangle-8 {
  top: 198px;
}
.icosahedron .triangle-9 {
  -moz-transform: rotateY(-648deg) rotateX(-45deg) translateZ(99px);
  -ms-transform: rotateY(-648deg) rotateX(-45deg) translateZ(99px);
  -webkit-transform: rotateY(-648deg) rotateX(-45deg) translateZ(99px);
  transform: rotateY(-648deg) rotateX(-45deg) translateZ(99px);
  top: 99px;
  border-bottom: none;
  border-top: 198px solid #0de621;
}
.icosahedron:hover .triangle-9 {
  top: 198px;
}
.icosahedron .triangle-10 {
  -moz-transform: rotateY(-720deg) rotateX(-45deg) translateZ(99px);
  -ms-transform: rotateY(-720deg) rotateX(-45deg) translateZ(99px);
  -webkit-transform: rotateY(-720deg) rotateX(-45deg) translateZ(99px);
  transform: rotateY(-720deg) rotateX(-45deg) translateZ(99px);
  top: 99px;
  border-bottom: none;
  border-top:198px solid #0de621;
}
.icosahedron:hover .triangle-10 {
  top: 198px;
}
.icosahedron .triangle-11 {
  -moz-transform: rotateY(-792deg) translateZ(-155px) rotateX(-9deg);
  -ms-transform: rotateY(-792deg) translateZ(-155px) rotateX(-9deg);
  -webkit-transform: rotateY(-792deg) translateZ(-155px) rotateX(-9deg);
  transform: rotateY(-792deg) translateZ(-155px) rotateX(-9deg);
  top: 0;
  border-bottom: none;
  border-top: 198px solid #0de6df;
}
.icosahedron:hover .triangle-11 {
  -moz-transform: rotateY(-792deg) translateZ(-230px) rotateX(-9deg);
  -ms-transform: rotateY(-792deg) translateZ(-230px) rotateX(-9deg);
  -webkit-transform: rotateY(-792deg) translateZ(-230px) rotateX(-9deg);
  transform: rotateY(-792deg) translateZ(-230px) rotateX(-9deg);
}
.icosahedron .triangle-12 {
  -moz-transform: rotateY(-864deg) translateZ(-155px) rotateX(-9deg);
  -ms-transform: rotateY(-864deg) translateZ(-155px) rotateX(-9deg);
  -webkit-transform: rotateY(-864deg) translateZ(-155px) rotateX(-9deg);
  transform: rotateY(-864deg) translateZ(-155px) rotateX(-9deg);
  top: 0;
  border-bottom: none;
  border-top: 198px solid #0de6df;
}
.icosahedron:hover .triangle-12 {
  -moz-transform: rotateY(-864deg) translateZ(-230px) rotateX(-9deg);
  -ms-transform: rotateY(-864deg) translateZ(-230px) rotateX(-9deg);
  -webkit-transform: rotateY(-864deg) translateZ(-230px) rotateX(-9deg);
  transform: rotateY(-864deg) translateZ(-230px) rotateX(-9deg);
}
.icosahedron .triangle-13 {
  -moz-transform: rotateY(-936deg) translateZ(-155px) rotateX(-9deg);
  -ms-transform: rotateY(-936deg) translateZ(-155px) rotateX(-9deg);
  -webkit-transform: rotateY(-936deg) translateZ(-155px) rotateX(-9deg);
  transform: rotateY(-936deg) translateZ(-155px) rotateX(-9deg);
  top: 0;
  border-bottom: none;
  border-top: 198px solid #0de6df;
}
.icosahedron:hover .triangle-13 {
  -moz-transform: rotateY(-936deg) translateZ(-230px) rotateX(-9deg);
  -ms-transform: rotateY(-936deg) translateZ(-230px) rotateX(-9deg);
  -webkit-transform: rotateY(-936deg) translateZ(-230px) rotateX(-9deg);
  transform: rotateY(-936deg) translateZ(-230px) rotateX(-9deg);
}
.icosahedron .triangle-14 {
  -moz-transform: rotateY(-1008deg) translateZ(-155px) rotateX(-9deg);
  -ms-transform: rotateY(-1008deg) translateZ(-155px) rotateX(-9deg);
  -webkit-transform: rotateY(-1008deg) translateZ(-155px) rotateX(-9deg);
  transform: rotateY(-1008deg) translateZ(-155px) rotateX(-9deg);
  top: 0;
  border-bottom: none;
  border-top: 198px solid #0de6df;
}
.icosahedron:hover .triangle-14 {
  -moz-transform: rotateY(-1008deg) translateZ(-230px) rotateX(-9deg);
  -ms-transform: rotateY(-1008deg) translateZ(-230px) rotateX(-9deg);
  -webkit-transform: rotateY(-1008deg) translateZ(-230px) rotateX(-9deg);
  transform: rotateY(-1008deg) translateZ(-230px) rotateX(-9deg);
}
.icosahedron .triangle-15 {
  -moz-transform: rotateY(-1080deg) translateZ(-155px) rotateX(-9deg);
  -ms-transform: rotateY(-1080deg) translateZ(-155px) rotateX(-9deg);
  -webkit-transform: rotateY(-1080deg) translateZ(-155px) rotateX(-9deg);
  transform: rotateY(-1080deg) translateZ(-155px) rotateX(-9deg);
  top: 0;
  border-bottom: none;
  border-top: 198px solid #0de6df;
}
.icosahedron:hover .triangle-15 {
  -moz-transform: rotateY(-1080deg) translateZ(-230px) rotateX(-9deg);
  -ms-transform: rotateY(-1080deg) translateZ(-230px) rotateX(-9deg);
  -webkit-transform: rotateY(-1080deg) translateZ(-230px) rotateX(-9deg);
  transform: rotateY(-1080deg) translateZ(-230px) rotateX(-9deg);
}
.icosahedron .triangle-16 {
  -moz-transform: rotateY(-1404deg) translateZ(-155px) rotateX(9deg);
  -ms-transform: rotateY(-1404deg) translateZ(-155px) rotateX(9deg);
  -webkit-transform: rotateY(-1404deg) translateZ(-155px) rotateX(9deg);
  transform: rotateY(-1404deg) translateZ(-155px) rotateX(9deg);
  top: 0;
}
.icosahedron:hover .triangle-16 {
  -moz-transform: rotateY(-1404deg) translateZ(-230px) rotateX(9deg);
  -ms-transform: rotateY(-1404deg) translateZ(-230px) rotateX(9deg);
  -webkit-transform: rotateY(-1404deg) translateZ(-230px) rotateX(9deg);
  transform: rotateY(-1404deg) translateZ(-230px) rotateX(9deg);
}
.icosahedron .triangle-17 {
  -moz-transform: rotateY(-1476deg) translateZ(-155px) rotateX(9deg);
  -ms-transform: rotateY(-1476deg) translateZ(-155px) rotateX(9deg);
  -webkit-transform: rotateY(-1476deg) translateZ(-155px) rotateX(9deg);
  transform: rotateY(-1476deg) translateZ(-155px) rotateX(9deg);
  top: 0;
}
.icosahedron:hover .triangle-17 {
  -moz-transform: rotateY(-1476deg) translateZ(-230px) rotateX(9deg);
  -ms-transform: rotateY(-1476deg) translateZ(-230px) rotateX(9deg);
  -webkit-transform: rotateY(-1476deg) translateZ(-230px) rotateX(9deg);
  transform: rotateY(-1476deg) translateZ(-230px) rotateX(9deg);
}
.icosahedron .triangle-18 {
  -moz-transform: rotateY(-1548deg) translateZ(-155px) rotateX(9deg);
  -ms-transform: rotateY(-1548deg) translateZ(-155px) rotateX(9deg);
  -webkit-transform: rotateY(-1548deg) translateZ(-155px) rotateX(9deg);
  transform: rotateY(-1548deg) translateZ(-155px) rotateX(9deg);
  top: 0;
}
.icosahedron:hover .triangle-18 {
  -moz-transform: rotateY(-1548deg) translateZ(-230px) rotateX(9deg);
  -ms-transform: rotateY(-1548deg) translateZ(-230px) rotateX(9deg);
  -webkit-transform: rotateY(-1548deg) translateZ(-230px) rotateX(9deg);
  transform: rotateY(-1548deg) translateZ(-230px) rotateX(9deg);
}
.icosahedron .triangle-19 {
  -moz-transform: rotateY(-1620deg) translateZ(-155px) rotateX(9deg);
  -ms-transform: rotateY(-1620deg) translateZ(-155px) rotateX(9deg);
  -webkit-transform: rotateY(-1620deg) translateZ(-155px) rotateX(9deg);
  transform: rotateY(-1620deg) translateZ(-155px) rotateX(9deg);
  top: 0;
}
.icosahedron:hover .triangle-19 {
  -moz-transform: rotateY(-1620deg) translateZ(-230px) rotateX(9deg);
  -ms-transform: rotateY(-1620deg) translateZ(-230px) rotateX(9deg);
  -webkit-transform: rotateY(-1620deg) translateZ(-230px) rotateX(9deg);
  transform: rotateY(-1620deg) translateZ(-230px) rotateX(9deg);
}
.icosahedron .triangle-20 {
  -moz-transform: rotateY(-1692deg) translateZ(-155px) rotateX(9deg);
  -ms-transform: rotateY(-1692deg) translateZ(-155px) rotateX(9deg);
  -webkit-transform: rotateY(-1692deg) translateZ(-155px) rotateX(9deg);
  transform: rotateY(-1692deg) translateZ(-155px) rotateX(9deg);
  top: 0;
}
.icosahedron:hover .triangle-20 {
  -moz-transform: rotateY(-1692deg) translateZ(-230px) rotateX(9deg);
  -ms-transform: rotateY(-1692deg) translateZ(-230px) rotateX(9deg);
  -webkit-transform: rotateY(-1692deg) translateZ(-230px) rotateX(9deg);
  transform: rotateY(-1692deg) translateZ(-230px) rotateX(9deg);
}
.triangle-21 h6{
	font-size: 25px;
    margin: 70px -57px;
}
body > h1 {
  font-family: Arial;
  font-size: 18px;
  position: absolute;
  top: 20px;
  left: 50px;
  font-weight: normal;
}
body > span {
  font-size: 14px;
  font-family: Arial;
  position: absolute;
  top: 60px;
  left: 50px;
  background-color: hotpink;
  border-radius: 3px;
  padding: 6px 10px;
  color: white;
  text-shadow: 0 1px 0 #ff0381;
}
@import "compass/css3.html";

/*
 * I made up an icosahedron with only css triangles
 * Positionning is handled by a sass @for loop
 * A nice hover effect 
*/

@mixin animation ($params) { 
    -webkit-animation:$params;
    -moz-animation:$params;
}
.spin { 
    @include animation(spin 5s linear infinite); 
}
@-webkit-keyframes spin { 
 from { -webkit-transform: rotateY(0deg) rotateX(-20deg); }
 to { -webkit-transform: rotateY(360deg) rotateX(-20deg); } }
@-moz-keyframes spin { 
 from { -moz-transform: rotateY(0deg) rotateX(-20deg); }
 to { -moz-transform: rotateY(360deg) rotateX(-20deg); } 
}

.icosahedron-wraper {
    @include transform( rotate(-29deg) rotateX(0deg) );
    
    -webkit-perspective:2500px; 
    -moz-perspective:2500px; 
}

$triangleColor:hotpink; 
$triangleLength:20; 
$triangleSize:198px; 
$angle:360 / 5;

.icosahedron {    
    width:$triangleSize; height:$triangleSize; 
    margin:130px auto 0; position:relative; 
    -webkit-transform-style:preserve-3d; 
    -moz-transform-style:preserve-3d; 
    outline:1px solid lavender; 
    
    [class^="triangle-"] { 
        position:absolute; top:0; 
        width:0px; height:0px; 
        border-left:$triangleSize/1.9 solid transparent; 
        border-right:$triangleSize/1.9 solid transparent; 
        border-bottom:$triangleSize solid $triangleColor; 
        @include opacity(.4); 
        @include transition(all .5s ease); 
    }
    .triangle-21 { 
        border-bottom-color:lavender; @include opacity(1); 
    }
}


.icosahedron { 
    // -------------------------------- /
    // this loop does all the job       /
    // -------------------------------- /
    
    @for $i from 1 through $triangleLength {
        // top part
        @if $i <= 5 {
            .triangle-#{$i} { 
                @include transform( rotateY(-(#{$angle*$i}deg)) rotateX(-45deg) translateZ(-$triangleSize/2+(0)) ); 
                top:-$triangleSize/2;
            }
            &:hover .triangle-#{$i} { top:-$triangleSize; }
        }
        // bottom part (top part inverted)
        @else if $i <= 10 {
            .triangle-#{$i} { 
                @include transform( rotateY(-(#{$angle*$i}deg)) rotateX(-45deg) translateZ($triangleSize/2+(0)) ); 
                top:$triangleSize/2; 
                border-bottom:none; 
                border-top:$triangleSize solid $triangleColor; 
            }
            &:hover .triangle-#{$i} { top:$triangleSize; }
        }
        // first ring
        @else if $i <= 15 {
            .triangle-#{$i} { 
                @include transform( rotateY(-(#{$angle*$i}deg)) translateZ(-155px) rotateX(-9deg) ); 
                top:0; 
                border-bottom:none; 
                border-top:$triangleSize solid $triangleColor; 
            }
            &:hover .triangle-#{$i} { @include transform( rotateY(-(#{$angle*$i}deg)) translateZ(-230px) rotateX(-9deg) ) }
        }
        // second ring (first ring inverted)
        @else if $i <= 20 {
            .triangle-#{$i} { 
                @include transform( rotateY(-(#{$angle*$i+252}deg)) translateZ(-155px) rotateX(9deg) );
                top:0; 
            }
            &:hover .triangle-#{$i} { @include transform( rotateY(-(#{$angle*$i+252}deg)) translateZ(-230px) rotateX(9deg) ); }
        }
    }
}


body > {
    h1 { font-family:Arial; font-size:18px; 
        position:absolute; top:20px; left:50px; 
        font-weight:normal; }
    span { font-size:14px; font-family:Arial; 
        position:absolute; top:60px; left:50px; 
        background-color:hotpink; 
        border-radius:3px; padding:6px 10px; color:white;   
        text-shadow:0 1px 0 darken(hotpink,20%); 
  }
}