3d transforms

by scruffles

HTML

<a href="#">click to show</a>
<div class="form">
    <span class="label">Name:</span><input type="text"><br/>
    <span class="label">Address: </span><input type="text"><br/>
    <span class="label">City: </span><input type="text"><br/>
</div>

CSS

.form {
    /*display:none;*/
    background:lightgrey;
    width: 200px;
    padding: 5px;
    
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
    
    transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
    
    -webkit-transform-origin:0% 0%;
    
    transition:1.8s;
}

.label {
    display: inline-block;
    width: 70px;
}

JavaScript

$('a').click(function() {
//    $('.form').show();
    $('.form').css({
        'transform':'rotateX(0deg)',
	    '-webkit-transform':'rotateX(0deg)'
    });
});