3D Star

by Marc Malignan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<div id="rating">
    <div class="star active">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
    </div>
    <div class="star">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
    </div>
    <div class="star">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
    </div>
    <div class="star">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
    </div>
    <div class="star">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
    </div>
</div>

SCSS

$size: 100px;

body {
    background: #333;
}
#rating {
    position: absolute;
    top: 50%; left: 50%;
    width: $size * 5;
    height: $size;
    margin: $size/-2 0 0 ($size*5)/-2;
    -webkit-perspective: 500;
    perspective: 500;
}

.star {
    float: left;
    width: $size;
    height: $size;
    line-height: $size*1.05;
    font-size: $size;
    color: #777;
    text-align: center;
    text-shadow: 0 $size/50 $size/25 rgba(0,0,0,.5);
    transition: all .5s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.star i {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    backface-visibility: hidden;
}
.star i:last-child { 
    color: yellow;
    transform: rotateY(-180deg);
}

.star.active {
    transform: rotateY(-180deg);
}

JavaScript

$('.star').click(function() {
    $(this).addClass('active');
	$(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');
});