SO - 19173644

by Arun P Johny

HTML

<div id="container">
    <div class="thing"><button class="info">click1</button></div>
    <div class="thing"><button class="info">click2</button></div>
    <div class="thing"><button class="info">click3</button></div>
    <div class="thing"><button class="info">click4</button></div>
</div>

CSS

@keyframes toFront{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(-90deg);}
}
@-webkit-keyframes toFront{
    0%{-webkit-transform:rotateY(0deg);}
    100%{-webkit-transform:rotateY(-90deg);}
}
.thing{
    animation: toFront 1s;
    -webkit-animation: toFront 1s;
    position:relative;
    background-color:blue;
    width:100px;
    height:100px;
    margin:10px;
}
.info{
    position:absolute;
    top:0;
    left:20px;
    width:60px;
}

JavaScript

$(".info").click(function(){
    var $it = $(this).closest(".thing");
    alert($it.text());
    $it[0].style.webkitAnimationPlayState="running"; 
});