React Animation: Card Flip

fiddle.css

.deck-component {
    perspective: 1000px;
}
.card-component {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 50px;
    height:50px;
    margin: 10px;
    transition: transform 300ms ease;
    transform-style: preserve-3d;
}
.card-component.flipped {
    transform: rotateY(180deg);
}
.card-component > * {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    backface-visibility: hidden;
}
.card-component .front {
    background-color: white;
    transform: rotateY(0deg);
    z-index: 1;
}
.card-component .back {
    background-color: #1e5799;
    background: linear-gradient(to top, #1e5799 0%,#7db9e8 100%); /* W3C */
    transform: rotateY(180deg);
}

fiddle.html

<!-- Required for using JSX in JsFiddle -->
<script src="//facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<!-- 
  sometimes gist / fiddle external resources specified in the manifest 
  are loaded out of order, so we the react dependencies in order here 
-->
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>

<div id="app"></div>

fiddle.js

var Card = React.createClass({
  getInitialState: function () { return {}; },
  flip: function () {
    this.setState({flipped: !this.state.flipped});
  },
  render: function () {
    return (
      <div 
        onClick={this.flip} 
        className={classNames('card-component', {'flipped': this.state.flipped})}>
        <div className="front">
          <div className="inner">{this.props.children}</div>
        </div>
        <div className="back">&nbsp;</div>
      </div>
    );
  }
});

var Deck = React.createClass({
  cards: ['A', 'B', 'C'],
  render: function () {
    var cards = this.cards.map(function (cardIdentity) {
      return <Card key={cardIdentity}>{cardIdentity}</Card>;
    }.bind(this));
    return <div className="deck-component">{cards}</div>;
  }
});

ReactDOM.render(<Deck />, document.getElementById('app'));

fiddle.manifest

name: ReactJS Animation Class Swap Example
description: React state class swap card flip animation
authors:
  - Adam Horton
resources:
  - //cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
  - //cdnjs.cloudflare.com/ajax/libs/classnames/2.1.3/index.min.js
normalize_css: no
wrap: h
panel_js: 2
panel_css: 0