HTML

<div class="css3-D bx">
<span>
<span>
<span>
<span>
{ HOVER }
</span>
</span>
</span>
</span>
</div>

JS

$(function(){
    $('.css3-D').click(function(){
        $(this).toggleClass("after");
    });
    $('.css3-D').hover(function(){
        $(this).find('.ft_cas').text('{ CLICK }');
    },function(){
        $(this).find('.ft_cas').text('{ HOVER }');
    });
});

CSS

/* 装飾 あってもなくてもOK */
.bx{
    cursor: pointer;
    margin: 100px auto 100px auto;
    color: #fff;
    font-family: arial;
    background: #19283c;
}

.css3-D,.css3-D span{
    text-align: center;
}

.css3-D span{
    display: inline-block;
    height: 200px;
    width: 200px;
    line-height: 200px;
    margin: 0 auto;
    border-radius: 100px;
    border:0px solid #fff;
    -webkit-transition-property:-webkit-transform,height,width,line-height,border-radius,background;
    -webkit-transition-duration:0.3s;
    transition-property:transform,height,width,line-height,border-radius,background;
    transition-duration:0.3s;
}

.css3-D{
    background: #19283c;
    border-radius: 0px;
    width:200px;
    height:200px;
    line-height: 200px;
    -webkit-transition-property:-webkit-transform,background,border-radius,height,width,line-height,box-shadow;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:ease;
    transition-property:transform,background,border-radius,height,width,line-height,box-shadow;
    transition-duration:0.5s;
    transition-timing-function:ease;
}

/* ----- ホバー後の動作 ----- */

.css3-D:hover{
    background: #007374;
    border-radius: 200px;
    width:400px;
    height:400px;
    line-height: 400px;
    box-shadow:0 0 40px 0px #007374;
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}

.css3-D:hover span{background:rgba(25, 40, 60, 0.5);border-radius: 200px;}
.css3-D:hover > span{transition-delay:0.3s; height: 380px; width: 380px; line-height: 380px;}
.css3-D:hover > span > span{transition-delay:0.4s;height: 350px; width: 350px; line-height: 350px;}
.css3-D:hover > span > span > span{transition-delay:0.5s;height: 310px; width: 310px; line-height: 310px;}
.css3-D:hover > span > span > span > span{transition-delay:0.6s;height: 260px; width: 260px; line-height: 260px;}

/* ----- クリック後の動作 ----- */

.after:hover span{-webkit-transition-duration:0.5s;-webkit-transform:rotateY(180deg);transition-duration:0.5s;transform:rotateY(180deg);}
.after:hover > span > span{transition-delay:0s;}
.after:hover > span > span > span{transition-delay:0.1s;}
.after:hover > span > span > span > span{transition-delay:0.2s;}

CSS3 イージング一覧