css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- Thanks to http://andymcfee.com/2012/08/24/css3-flip-cards/ -->
<!-- Character art by http://avalonis.deviantart.com/art/Real-Disney-Character-Faces-202556569 -->

<div class="wrap">
  
  <header class="page-head">
    <h1>Disney Characters as Real People</h1>
  </header>
  
  <div class="instruct">Mouse over (or tap) to see the character's name</div>
  
  <section class="faces">
    
    <div class="flip-card">
      <div class="card-front rapunzel"></div>
      <div class="card-back rapunzel">
        <p>Rapunzel</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front flynn"></div>
      <div class="card-back flynn">
        <p>Flynn Rider</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front gothel"></div>
      <div class="card-back gothel">
        <p>Mother Gothel</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front tiana"></div>
      <div class="card-back tiana">
        <p>Tiana</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front charlotte"></div>
      <div class="card-back charlotte">
        <p>Charlotte LaBouffe</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front esmeralda"></div>
      <div class="card-back esmeralda">
        <p>Esmeralda</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front frollo"></div>
      <div class="card-back frollo">
        <p>Frollo</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front quasimodo"></div>
      <div class="card-back quasimodo">
        <p>Quasimodo</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front giselle"></div>
      <div class="card-back giselle">
        <p>Giselle</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front jane"></div>
      <div class="card-back jane">
        <p>Jane</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front tarzan"></div>
      <div class="card-back tarzan">
        <p>Tarzan</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front cinderella"></div>
      <div class="card-back cinderella">
        <p>Cinderella</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front belle"></div>
      <div class="card-back belle">
        <p>Belle</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front prince-adam"></div>
      <div class="card-back prince-adam">
        <p>Prince Adam <br />(The Beast)</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front gaston"></div>
      <div class="card-back gaston">
        <p>Gaston</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front jafar"></div>
      <div class="card-back jafar">
        <p>Jafar</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front mulan"></div>
      <div class="card-back mulan">
        <p>Mulan</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front alice"></div>
      <div class="card-back alice">
        <p>Alice</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front jasmine"></div>
      <div class="card-back jasmine">
        <p>Jasmine</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front aladdin"></div>
      <div class="card-back aladdin">
        <p>Aladdin</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front aurora"></div>
      <div class="card-back aurora">
        <p>Aurora</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front prince-philip"></div>
      <div class="card-back prince-philip">
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front maleficent"></div>
      <div class="card-back maleficent">
        <p>Maleficent</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front cruella"></div>
      <div class="card-back cruella">
        <p>Cruella Deville</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front meg"></div>
      <div class="card-back meg">
        <p>Meg</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front hercules"></div>
      <div class="card-back hercules">
        <p>Hercules</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front pocahontas"></div>
      <div class="card-back pocahontas">
        <p>Pocahontas</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front snow-white"></div>
      <div class="card-back snow-white">
        <p>Snow White</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front evil-queen"></div>
      <div class="card-back evil-queen">
        <p>The Evil Queen</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front ariel"></div>
      <div class="card-back ariel">
        <p>Ariel</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front prince-eric"></div>
      <div class="card-back prince-eric">
        <p>Prince Eric</p>
      </div>
    </div>
    
    <div class="flip-card">
      <div class="card-front ursula"></div>
      <div class="card-back ursula">
        <p>Ursula</p>
      </div>
    </div>
    
    
  </section>
  
  <section class="about">
    <p>When I saw <a href="http://avalonis.deviantart.com/art/Real-Disney-Character-Faces-202556569" target="_blank" title="Real Disney Character Faces">Karen Graw's (aka Avalonis) artwork that humanized the Disney cast</a>, I was immediately intrigued. Not yet having kids of my own though, I'm not really familiar with the newer animated films. I found myself flipping my eyes up and down to figure out who was who. Damned if I didn't think there was a better way to present this magnificant composite.</p>
    <p>A huge thanks to <a href="http://avalonis.deviantart.com/" target="_blank" title="Avalonis on DeviantArt">Avalonis</a> for taking the time to create and share this with the world, and a quick dedication to my neices Katie & Andie, whom I am sure will love going through the portraits on the family's various iDevices. Love you both.
  </section>
  
  <footer class="authorfoot">
    <a href="https://twitter.com/ImperativeIdeas" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ImperativeIdeas</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  </footer>
  
</div> 
            
          
!
            
              @import "compass/css3";

// Google Fonts
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Stint+Ultra+Condensed);

// Global Variables

  $spacing: 10px; // the spaceing between elements
  $thewrap: 960px; // Max width of the composite
  $heading: 960px;
  $comments: 920px; // The comments DIV below the images


$rem-base: 16px;
$default-transition-duration: 650ms;
$perspective: 300;
$content: 'Lato', Arial, Helvetica, arial, sans-serif;
$headers: 'Stint Ultra Condensed', cursive;


// Media Breakpoints
@mixin breakpoint($point) {
  @if $point == desktop {
    @media screen and (min-width: 1200px) { @content; }
  }
  @if $point == smdesk {
    @media screen and (min-width: 1025px) and (max-width: 1199px) { @content; } 
  }
  @else if $point == tablet {
    @media screen and (min-width: 551px) and (max-width: 1024px) { @content; }
  }
  @else if $point == phone {
    @media screen and (max-width: 550px)  { @content; }
  }
}

/** Project Functions for EM Calculation (by Zurb / Foundation) **/

@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}


// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  
  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
  
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}


body {
  //min-width: rem-calc($minwide);
}

.wrap {
  max-width: rem-calc($thewrap);
  margin: 0 auto;
  @include breakpoint(smdesk) {
    max-width: rem-calc(900px);
  }
  @include breakpoint(tablet) {
    max-width: rem-calc(500px);
  }
  @include breakpoint(phone) {
    max-width: rem-calc(320px);
  }
}

header.page-head {
  margin: rem-calc(35px) 0 rem-calc(10px);
  h1 {
    padding: rem-calc(3px) rem-calc(12px);
    color: rgb(36, 21, 4);
    font-family: Disney;
    font-size: rem-calc(32px);
    line-height: rem-calc(40px);
    -webkit-text-stroke: rem-calc(0.25px);
    text-align: center;
    @include border-radius(rem-calc(4px), rem-calc(4px));
    background-color: #e6f0a3; // Old browsers
    @include filter-gradient(#e6f0a3, #dbf043, vertical); // IE6-8
    // IE9 SVG, needs conditional override of 'filter' to 'none'
    $experimental-support-for-svg: true;
    @include background-image(linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%));
    @include breakpoint(phone) {
      font-size: rem-calc(26px);
    }
  }
}

section.faces {
  margin: 0 auto;
  margin-top: rem-calc(5px);
  width: rem-calc($thewrap);
  overflow: hidden;
  @include breakpoint(smdesk) {
      width: rem-calc(900px);
    }
  @include breakpoint(tablet) {
    width: rem-calc(432px);
  }
  @include breakpoint(phone) {
    width: rem-calc(312px);
  }
  
  
  
  
  /***
  * CSS3 FLIP CARDS
  * Markup for an element that a user can hover to reveal content on the back, like a card
  * Browser Support: Safari, Firefox, Chrome, IE8+, and Touch Devices; (IE9 and below will not have any flip effect but will just change on hover)
  ***/
  
  .flip-card {
    display: block;
    position: relative;
    z-index: 1000;
    width: rem-calc(100px); 
    height: rem-calc(132px);
    
    p {
      position: absolute;
      bottom: rem-calc(5px);
      width: 100%;
      margin: 0;
      font-family: $headers;
      font-size: rem-calc(22px);
    }
    
    .card-front,
    .card-back {
      @include backface-visibility(hidden);
      @include single-transition(transform);
      display: block;
      height: 100%;
      position: absolute;
      width: 100%; 
    }
    
    .card-front {
      @include transform3d(perspective($perspective) rotateY(0));
      z-index: 900;
    }
    
    .card-back {
      @include rotateY(-180deg); //Using rotate instead of transform prevents the back of the card from flipping on page load because transition is only targeting transform. Super sweet. 
      z-index: 800;
    }
    
    &:hover {
      .card-front { 
        @include transform(rotateY(180deg)); //No 3D fallback
        @include transform3d(perspective($perspective) rotateY(180deg)); 
      }
      .card-back { 
        z-index: 950; //No transform fallback
        @include transform(rotateY(0deg)); //No 3D fallback
        @include transform3d(perspective($perspective) rotateY(0deg)); 
      }
    }
  }
  
  
  
  
  /*** Just for show... ***/
  
  .flip-card {
    @include text-shadow(rem-calc(1px) rem-calc(1px) 0 rgba(darken(#1B8CE8, 20%), .8) );
    color: #fff;
    cursor: pointer;
    float: left;
    font-weight: bold;
    margin: rem-calc($spacing); // This is the spacing between items!
    text-align: center;
    text-transform: uppercase;
    @include breakpoint(smdesk) {
      margin: rem-calc(6px);
    }
    @include breakpoint(tablet) {
      margin: rem-calc(4px);
    }
    @include breakpoint(phone) {
      margin: rem-calc(2px);
    }
    
    .card-front,
    .card-back {
      @include border-radius(rem-calc(5px));
      @include box-shadow(rem-calc(1px) rem-calc(1px) rem-calc(2px) rgba(darken(#1B8CE8, 20%), .8));
      @include box-sizing(border-box);
      border: rem-calc(1px) solid darken(#1B8CE8, 40%);
      padding: rem-calc(40px) 0;
    }
        
    .card-front {
      @include box-sizing(border-box);
      @include box-shadow(0 0 rem-calc(20px) rgba(darken(rgb(0,0,0), 10%), .8) inset);
      background: url(http://dev.imperativeideas.com/drafts/codepen/disney/images/real_disney.jpg) no-repeat;
    }
    
    .card-back {
      @include box-sizing(border-box);
      @include box-shadow(0 0 rem-calc(20px) rgba(darken(rgb(0,0,0), 10%), .8) inset);
      background: url(http://dev.imperativeideas.com/drafts/codepen/disney/images/orig_disney.jpg) no-repeat;
    }
    
    // Change the background position for each card by name
    .rapunzel {background-position: 0 -1px}
    .flynn {background-position: -100px -1px;}
    .gothel {background-position: -200px -1px;}
    .tiana {background-position: -300px -1px;}
    .charlotte {background-position: -400px -1px;}
    .esmeralda {background-position: -500px -1px;}
    .frollo {background-position: -600px -1px;}
    .quasimodo {background-position: -700px -1px;}
    
    .giselle {background-position: 0 -134px}
    .jane {background-position: -100px -134px;}
    .tarzan {background-position: -200px -134px;}
    .cinderella {background-position: -300px -134px;}
    .belle {background-position: -400px -134px;}
    .prince-adam {background-position: -500px -134px;}
    .gaston {background-position: -600px -134px;}
    .jafar {background-position: -700px -134px;}
    
    .mulan {background-position: 0 -267px}
    .alice {background-position: -100px -267px;}
    .jasmine {background-position: -200px -267px;}
    .aladdin {background-position: -300px -267px;}
    .aurora {background-position: -400px -267px;}
    .prince-philip {background-position: -500px -267px;}
    .maleficent {background-position: -600px -267px;}
    .cruella {background-position: -700px -267px;}
    
    .meg {background-position: 0 -400px}
    .hercules {background-position: -100px -400px;}
    .pocahontas {background-position: -200px -400px;}
    .snow-white {background-position: -300px -400px;}
    .evil-queen {background-position: -400px -400px;}
    .ariel {background-position: -500px -400px;}
    .prince-eric {background-position: -600px -400px;}
    .ursula {background-position: -700px -400px;}
  } 
}

.about {
  @include box-sizing(border-box);
  @include box-shadow(0 0 rem-calc(50px) rgba(darken(rgb(36, 21, 4), 30%), .8) inset);
  width: rem-calc($comments);
  margin: 0 auto;
  margin-top:rem-calc(15px);
  padding: rem-calc(10px);
  border: rem-calc(1px) solid #c1a98f;
  @include border-radius(rem-calc(4px), rem-calc(4px));
  @include background-image(linear-gradient(top, rgba(246,255,232,0.73) 0%,rgba(255,253,206,0.73) 24%,rgba(255,253,206,0.73) 61%,rgba(255,253,206,0.73) 83%,rgba(246,255,232,0.73) 100%));
  @include breakpoint(smdesk) {
      width: rem-calc(800px);
    }
  @include breakpoint(tablet) {
    width: rem-calc(500px);
  }
  @include breakpoint(phone) {
    width: 100%;
  }

  p {
    color: #443b10;
    font-family: $content;
    font-size: rem-calc(16px);
    line-height: rem-calc(22px);
    margin-bottom: rem-calc(16px);
    &:last-child {
      margin-bottom: 0; 
    }
    a {
     color: #278c08; 
    }
  }
}

.instruct {
  padding: rem-calc(3px) rem-calc(10px);
  margin: 0 auto;
  width: rem-calc(300px);
  background: rgba(255,255,255,.5); 
  font-family: $content;
  font-size: rem-calc(14px);
  text-align: center;
}

.authorfoot {
  margin: rem-calc(25px) 0;
  text-align: center;
}
            
          
!
            
              /*!
 * Disney Characters as Real Faces - Card Fliping Web App
 * @version : 1.2
 * @author: Imperative Ideas (@imperativeideas)
 *
 * Version 1.2 Notes
 * + Added class-level responsive media queries through SCSS
 * + App is now responsive for proper performance on phones.
 * + Fixed an SCSS bug that broke everything for a few hours (sorry)
 *
 * Version 1.1 Notes
 * + Added original animated character portraits to the backs of cards
 * + Moved name label down to deal with text rendering over faces
 * + Converted all rendered measurements to ems with a base size of 16px
 *
 * Version 1.1
 * + Initial Release
 */

/*!
 * Some jQuery just to clean things up and render a background
 */

// Support IE cross domain font usage
jQuery.support.cors = true;

// Document ready execution
jQuery(function ($) {
  
  // Blank anchors shouldn't ever change the URL
  $('a[href$="#"]').click(function (e) {
    e.preventDefault();
  });
  
  // Grab the background image
  $.backstretch("http://dev.imperativeideas.com/drafts/codepen/disney/images/enchanged-forest.jpg");
  
  $(window).smartresize(function () { // Run these functions on resize (smart debounce)

  });
  
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console