<label> <input type="checkbox" /> <div class="card"> <div class="front">Front</div> <div class="back">Back</div> </div> </label>
@import url(http://fonts.googleapis.com/css?family=Open+Sans); body { background: #F17563; font-family: Open Sans; font-size: 50px; color: #222; } label { -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: block; width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; } .card { position: relative; height: 100%; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 600ms; transition: all 600ms; z-index: 20; } .card div { position: absolute; height: 100%; width: 100%; background: #FFF; text-align: center; line-height: 200px; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px; } .card .back { background: #222; color: #FFF; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } label:hover .card { -webkit-transform: rotateX(20deg); transform: rotateX(20deg); box-shadow: 0 20px 20px rgba(50,50,50,.2); } input { display: none; } :checked + .card { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); } label:hover :checked + .card { transform: rotateX(160deg); -webkit-transform: rotateX(160deg); box-shadow: 0 20px 20px rgba(255,255,255,.2); }