CSS Fold Out Transform Height Issues


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:


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 id="shadow"></div>
Problem courtesy of: Soltechy


Looks a lot better with

-webkit-perspective: 550;


Solution courtesy of: 321zeno


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.