3D flip fields

HTML

<form>
    <input type="text" value="First Name" class="form-field-text">
    <br>
    <input type="text" value="Last Name" class="form-field-text">
    <br>
    <textarea>Comments</textarea>
    <br>
    <input type="text" value="Email" class="form-field-text">
    <br>
    <input type="text" value="Subject" class="form-field-text">
    <br>
</form>

CSS

body {
    background:rgb(30, 30, 30);
    color:#fff;
    font-family:sans-serif;
}
form {
    -webkit-perspective: 300;
    width:175px;
    display:block;
    margin:0 auto;
}
.field-wrap {
    display:inline-block;
    position:relative;
    height:40px;
    padding:0;
    margin:5px 0;
    line-height:0;
    font-size:0;
    cursor:pointer;
    -webkit-transition:all .2s ease-out;
    -webkit-transform:rotateX(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.field-desc {
    font-size:10px;
    text-transform:uppercase;
}
.field-value {
    position: absolute;
    white-space:nowrap;
    overflow:hidden;
    top: 0;
    left: 0;
    height: 40px;
    line-height: 20px;
    padding-top: 0;
    -webkit-transform: rotateX(0deg);
    -webkit-backface-visibility: hidden;
    padding: 10px;
    background: #585858;
    color: #CCC;
    width: 100%;
    font-size: 13px;
    box-sizing: border-box;
}
input[type=text] {
    border:none;
    height:40px;
    width:175px;
    padding:0 10px;
    font-size:14px;
    line-height:1em;
    margin:0;
    outline:none;
    -webkit-transform:rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
input[type=text]:focus {
    background: #5C84EB;
    color: #FFF;
}
.flip {
    -webkit-transform:rotateX(-180deg);
}
textarea {
    width:175px;
    font-family:sans-serif;
    margin:5px 0;
    padding: 10px;
    outline:none;
    border:none;
    background: #585858;
    color: #CCC;
    -webkit-transition:all .3s ease-out;
}
textarea:focus {
    background:#5C84EB;
    color:#fff;
}

JavaScript

$('input[type=text]').each(function () {
    /* Save original values */
    var originalValue = $(this).attr('value');
    /* Wrap text fields in div for flipping */
    $(this).wrap('<div class="field-wrap"></div>');
    /* Insert div to show value on reverse side */
    $(this).after('<div class="field-value">' + originalValue + '</div>');
    /* Set the actual inputs to blank */
    $(this).val('');
    /* When typing, update the div on the reverse side. If no text, revert to original */
    $(this).on('input', function () {
        var newValue = $(this).val();
        if (newValue.length > 0) {
            $(this).next('.field-value').html('<span class="field-desc">' + originalValue + '</span> ' + newValue);
        } else {
            $(this).next('.field-value').html(originalValue);
        }
    });
    /* On blur, flip back */
    $(this).on('focusout', function () {
        $(this).parent().removeClass('flip');
    });
});

/* Click on textFIELD */
$(document).on('click', '.field-wrap', function (event) {
    $(this).addClass('flip');
    $(this).find('input').focus();
});

/* Click on textAREA */
$(document).on('focus', 'textarea', function (event) {
    $(this).css('minHeight', '200px');
});
$(document).on('blur', 'textarea', function (event) {
    $(this).css('minHeight', '');
});

/* Make tabbing work again */
$(document).keydown(function (event) {
    if (event.keyCode != 9) return;
    var inputs = $('input, textarea');
    var maxIndex = inputs.length;
    var currIndex = inputs.index(event.target);
    var targetIndex = 0;
    if (event.shiftKey) {
        // go up the form
        targetIndex = currIndex - 1;
        if (targetIndex <= 0) targetIndex = maxIndex - 1;
    } else {
        // Go down the form
        targetIndex = currIndex + 1;
        if (targetIndex >= maxIndex) targetIndex = 0;
    }
    inputs.eq(targetIndex).click();
});