<div class="areaSlider">
  <div id="right" class="slider">
    <h2>Image</h2>
    <div id="model"></div>
  </div>
  <div id="left" class="slider">
    <h2>CSS</h2>
    <div id="logo-card">
      <div class="bg"></div>
      <div class="card shake">
        <div class="magnet"></div>
        <div class="labels">
          <div class="label"></div>
          <div class="label"></div>
          <div class="label"></div>
        </div>
        <div class="circles">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </div>
</div>

// propriétés du logo
$width: 350;
$height: 350;
$durationShake: 10;
$bgColor: #91c851;
$magnetColor: #4a4a4a;
$leftCircleColor: #f26f6d;
$rightCircleColor: #8dd7f3;
$labelColor: #c9c9ca;
$cardColor: #fff;

@mixin transition($time){
	-webkit-transition: $time; /* Safari */
	   -moz-transition: $time;
	    -ms-transition: $time;
	     -o-transition: $time;
			transition: $time;
}

@mixin transform_($prop){
	-webkit-transform: #{$prop};
	   -moz-transform: #{$prop};
	    -ms-transform: #{$prop};
	     -o-transform: #{$prop};
	        transform: #{$prop};
}

@mixin transform($name, $value){
	$prop: "#{$name}(#{$value})";
	@include transform_($prop);
}


@mixin borderRadius($radius){
	-webkit-border-radius: $radius;
	   -moz-border-radius: $radius;
	    -ms-border-radius: $radius;
	     -o-border-radius: $radius;
	        border-radius: $radius;
}
@mixin animation($name, $duration, $delay, $iterationCount, $func){
  -webkit-animation-name: $name;
  -webkit-animation-duration: $duration;
  -webkit-animation-delay: $delay;
  -webkit-animation-iteration-count: $iterationCount;
  -webkit-animation-timing-function: $func;
  
     -moz-animation-name: $name;
     -moz-animation-duration: $duration;
     -moz-animation-delay: $delay;
     -moz-animation-iteration-count: $iterationCount;
     -moz-animation-timing-function: $func;
  
      animation-name: $name;
      animation-duration: $duration;
      animation-delay: $delay;
      animation-iteration-count: $iterationCount;
      animation-timing-function: $func;
}

// image de référence
#model {
  position: relative;
  width: #{$width}px;
  height: #{$height}px;
  background: url(http://www.hostingreviewslist.com/wp-content/uploads/2013/04/credit-card-icon-with-green-bg.png);
  background-repeat: no-repeat no-repeat;
  background-size: contain;
}


#logo-card {
  position: relative;
  width: #{$width}px;
  height: #{$height}px;
}
  #logo-card:hover *, #logo-card:hover *:after, #logo-card:hover *:before {
  border: solid 1px;
}

  #logo-card > .bg {
    height: #{$height}px;
    width: #{$width}px;
    background: $bgColor;
    @include borderRadius(999px);
  }



$widthCard: 171 * $width / 300;
$heightCard: 110 * $height / 300;
$borderRadius: 10 * (($width + $height) / 2) / 300;
$magnetHeight: 20 * $height / 300;
$paddingX: 15 * $width / 300;
$paddingY: 10 * $height / 300;


// CSS Credit Card
  .card {
    position: absolute;
    left: calc( 50% - #{$widthCard}px / 2 );
    width: #{$widthCard}px;
    top: calc( 50% - #{$heightCard}px / 2 );
    height: #{$heightCard}px;
    background: $cardColor;
    @include borderRadius(#{$borderRadius}px);
  }
    .card.shake {
        @include animation( shake, #{$durationShake}s, 2s, infinite, linear );
        @include transform("origin", "50%, 50%");
    }

    .card > .magnet {
      position: absolute;
      top: calc( #{$magnetHeight}px + #{$paddingY}px - #{$borderRadius}px + 3px );
      left: 0;
      right: 0;
      height: #{$magnetHeight}px;
      background: $magnetColor;
    }

    .card > .labels {
      position: absolute;
      left: #{$paddingX}px;
      bottom: #{$paddingY}px;
      width: calc( #{$widthCard}px / 2 - #{$paddingX}px - #{$paddingY}px );
      height: calc( #{$heightCard}px / 2 - #{$paddingY}px );
    }

      .card > .labels > .label {
        position: absolute;
        left: 0;
        right: 0;
        height: calc( #{$heightCard}px / 6 - 8 * #{$paddingY}px / 7 );
        margin-top: calc( #{$heightCard}px / 6 - #{$paddingY}px );
        background: $labelColor;
      }

      .card > .labels > .label:nth-child(0) {
        top: 0;
      }

      .card > .labels > .label:nth-child(1) {
        top: calc( (#{$heightCard}px / 6 - #{$paddingY}px) * 2 - #{$paddingY}px / 4 );
      }

      .card > .labels > .label:nth-child(2) {
        bottom: 0;
      }

     .card > .circles {
        position: absolute;
        right: #{$paddingX}px;
        bottom: #{$paddingY}px;
        width: calc( #{$widthCard}px / 2 - #{$paddingX}px - #{$paddingY}px );
        height: calc( #{$heightCard}px / 2 - #{$paddingY}px );
      }
        .card > .circles > .left {
          position: absolute;
          left: calc( #{$paddingX}px / 4);
          bottom: 0;
          background: $leftCircleColor;
          height: calc( 5 * ( #{$heightCard}px / 6 - 8 * #{$paddingY}px / 7 ) );
          width: calc( 5 * ( #{$heightCard}px / 6 - 8 * #{$paddingY}px / 7 ) );
          @include borderRadius(999px);
        }

        .card > .circles > .right {
          position: absolute;
          right: calc( #{$paddingX}px / 4);
          bottom: 0;
          background: $rightCircleColor;
          height: calc( 5 * ( #{$heightCard}px / 6 - 8 * #{$paddingY}px / 7 ) );
          width: calc( 5 * ( #{$heightCard}px / 6 - 8 * #{$paddingY}px / 7 ) );
          @include borderRadius(999px);
        }


@keyframes shake {
  $v: $durationShake / 0.8;
   $s0: 0;
   $s1: 10 / $v;
   $s2: 20 / $v;
   $s3: 30 / $v;
   $s4: 40 / $v;
   $s5: 50 / $v;
   $s6: 60 / $v;
   $s7: 70 / $v;
   $s8: 80 / $v;
   $s9: 90 / $v;
  $s10: 100 / $v;
  
  $a: 2 * $width / 300;
  $b: 1 * $width / 300;
  $c: 3 * $width / 300;
  
	 #{$s0}% { @include transform_("translate(#{$a}px, #{$b}px) rotate(0deg)"); }
   #{$s1}% { @include transform_("translate(-#{$b}px, -#{$a}px) rotate(-1deg)"); }
   #{$s2}% { @include transform_("translate(-#{$c}px, 0px) rotate(1deg)"); }
   #{$s3}% { @include transform_("translate(0px, #{$a}px) rotate(0deg)"); }
   #{$s4}% { @include transform_("translate(#{$b}px, -#{$b}px) rotate(1deg)"); }
   #{$s5}% { @include transform_("translate(-#{$b}px, #{$a}px) rotate(-1deg)"); }
   #{$s6}% { @include transform_("translate(-#{$c}px, #{$b}px) rotate(0deg)"); }
   #{$s7}% { @include transform_("translate(#{$a}px, #{$b}px) rotate(-1deg)"); }
   #{$s8}% { @include transform_("translate(-#{$b}px, -#{$b}px) rotate(1deg)"); }
   #{$s9}% { @include transform_("translate(#{$a}px, #{$a}px) rotate(0deg)"); }
  #{$s10}% { @include transform_("translate(#{$b}px, -#{$a}px) rotate(-1deg)"); }
}



/*
 * Slider
 */
.areaSlider {
    position: absolute;
    width: calc( 2 * #{$width}px );
}
    .slider {
        position: absolute;
        top: 0px;
    }
    .areaSlider > div {
        transition: all 4s ease;
    }
    .areaSlider #left {left: 0px;}
    .areaSlider #right {
        z-index: 2;
        right: 0px;
        opacity: 1;
    }
    .areaSlider #right:hover{
        opacity: 0.4;
      transform: translate( calc( -#{$width}px / 2 ), 0px);
    }

    .areaSlider #right:hover + #left {
        transform: translate( calc( #{$width}px / 2 ), 0px);
    }

// CSS seulement