CSS 3D

CSS 3D

by Nirvanachain

HTML

<div class="container js-container">
    <div class="box">
    </div>
    <button type="button" class="js-button">Animate</button>
</div>

CSS

body {
    background: #fcfcfc;
    width: 100%;
    height: 100%;
}

.container { display: block }

.box {
    width: 200px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -100px;
    
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    transform: translateY(0) scale(0.95, 0.95);
}

.container.isActive .box {
    box-shadow: 0 11px 18px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px) scale(1, 1);
}

button {
    width: 100px;
    background: #333333;
    color: #FFFFFF;
    padding: 7px 10px;
    border: none;
    transition: background 0.3s ease-out;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;
}
button:hover {
    background: #50c0fb;
}

JavaScript

// Helpful Article
// http://aerotwist.com/tutorials/protip-nobody-expects-3d/?utm_source=CSS-Weekly&utm_campaign=Issue-103&utm_medium=email

var button = document.querySelector('.js-button');
var container = document.querySelector('.js-container');

button.addEventListener('click', function () {
    container.classList.toggle('isActive');
});