Stackoverflow Question Fiddle - 3D Transform Flip

http://stackoverflow.com/questions/18167981/clickable-link-area-unexpectedly-smaller-after-css-transform

HTML

<div id="main-container">
     <p class="title">List of Link Items</p>
    <ul>
        
        <li class="flipper">
            <div class="item front">
                <div class="item-links">
                   <a href="#" class="item-link">Item 1 </a>
                   <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
            <div class="item back">
                <div class="item-links">
                    <a href="#" class="item-link">Item 1 Completed</a>
                    <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
        </li>
        
        <li class="flipper">
            <div class="item front">
                <div class="item-links">
                   <a href="#" class="item-link">Item 2 </a>
                   <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
            <div class="item back">
                <div class="item-links">
                    <a href="#" class="item-link">Item 2 Completed</a>
                    <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
        </li>
        
        <li class="flipper">
            <div class="item front">
                <div class="item-links">
                   <a href="#" class="item-link">Item 3 </a>
                   <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
            <div class="item back">
                <div class="item-links">
                    <a href="#" class="item-link">Item 3 Completed</a>
                    <a href="#" class="item-action">(action)</a> 
                </div>
            </div>
        </li>
        
    </ul>
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

#main-container {
    -webkit-perspective: 800px;
    perspective: 800px;
}

p.title {
    margin: 0;
    background-color: #eee;
    border-bottom: 1px solid blue;
}

ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

li {
    -webkit-box-sizing: border-box;
    min-height: 3em;
    position: relative;
    
}

ul li.sorting {
    border-top: 1px solid black;
}

.animated {
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

.flipped {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flipper {
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 100% 1.5em;
    transform-style: preserve-3d;
    transform-origin: 100% 1.5em;
}

.flipper .item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid black;
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

div.front {
    background-color: orange;
    z-index: 1;
}

div.back {
    background-color: red;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

div.back a {
    text-decoration: line-through;
}

.item-links {
    height: 100%;
}

.item-links a {
    height: 100%;
    display: inline-block;
}

.item-links a:hover {
    background: rgba(255,255,255,0.4);
}


.item-links .item-link {
    float: left;
    width: 85%;
    padding-left: .2em;
}

.item-links .item-action {
    float: right;
    width: 15%;
    text-align: center;
    background-color: yellow;
}