EWT FA 2015 - Sass Homework starter code

index.html

<div class="container">
  <div class="card card1">
    <figure class="face front"><img src="http://placecage.com/300/400"></figure>
    <figure class="face back"><img src="http://fillmurray.com/300/400"></figure>
  </div>

  <div class="card">
    <figure class="face front"><img src="http://nicenicejpg.com/300/400"></figure>
    <figure class="face back"><img src="http://stevensegallery.com/300/400"></figure>
  </div>
</div>

<button id="flipper">Flip 'em</button>

script.js

(function($) {
    'use strict';

    var $cards = $('.card');

    $('#flipper').on('click', function() {
        $cards.toggleClass('flipped');
    });
})(window.jQuery);

style.css

.container {
    position: relative;
    width: 620px;
    height: 400px;
    border: 1px dotted #333;
    padding: 20px;
    margin: 20px auto;
    -webkit-perspective: 800px;
    perspective: 800px;
}

.container:after {
    clear: both;
    display: table;
    content: '';
}

.card {
    float: left;
    width: 300px;
    height: 400px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: perserve-3d;

    /* DO NOT WORRY ABOUT OR ALTER THE TWO RULES BELOW! */
    -webkit-transition: -webkit-transform 0.7s ease-out;
    transition: transform 0.7s ease-out;
}

.card1 {
    margin-right: 20px;
}

.face {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.front:hover {
    -webkit-filter: hue-rotate(90deg);
    -moz-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}

.back {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.back:hover {
    -webkit-filter: grayscale(70%);
    -moz-filter: grayscale(70%);
    filter: grayscale(70%);
}

.card.flipped {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}

#flipper {
    display: block;
    margin: 20px auto;
    font-size: 24px;
}