CSS Fold Out Transform Height Issues

Question

I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html

I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:

http://jsfiddle.net/HD2pm/

My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.

<div class="row">
<div class="span4">
<section id="btn">
    <p>Some Text Will Go Here</p>
    <div id="under">

        <div class="logo"><div class="recto"><a href="#" class="consumer"><i class="fa fa-user"></i>Consumer</a></div></div>
        <div class="top"></div>
        <div class="logo verso"></div>
    </div>
    <div id="shadow"></div>
</section>
</div>
</div>

Answer 1

Looks a lot better with

-webkit-perspective: 550;

http://jsfiddle.net/DrQP2/