3D leaf in CSS

by stackmanoz

HTML

<div class="leaf">
    <div class="front">Front</div>
    <div class="back">Back</div>
</div>

CSS

@-webkit-keyframes leaf {
    0% { 
        -webkit-transform:rotateY(0); 
    }
    100% { 
        -webkit-transform: rotateY(180deg);
    }
}
div { -webkit-transform-style:preserve-3d; }
div.leaf {
    background-color: lightgreen; 
    border-top-right-radius:170px;
    border-bottom-left-radius:170px;
    border:1px solid green;
    position:relative;
    width: 300px; 
    height: 300px;
    }

div.leaf div { 
    line-height:100px; 
    width:100px;
    height:100px;
    text-align:center; 
    background:yellow;
    position:absolute;
    }
div.leaf:hover { -webkit-animation:leaf 700ms forwards; }
div.leaf:hover .back { z-index:1; }
div.leaf:hover .front { z-index:0; }
.back { 
    -webkit-transform:rotateY(180deg) translateZ(1px);
    bottom:0;
    right:0;
    z-index:0;
    }
.front {
    z-index:1;
    top:0;
    left:0;    
}