flipping box

by James Doyle

HTML

<div class="parent">

    <div class="box2">stuff</div>
</div>

CSS

body {
    margin: 15px;
    color: white;
}

.box {
    height: 100px;
    width: 100px;
    padding: 10px;
    background: #555;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transform: perspective(200px)
        rotateX(0deg);
    -webkit-transform-style: preserve-3d;
}
.box2 {
    height: 100px;
    width: 100px;
    padding: 10px;
    background: #555;
    -webkit-transition: -webkit-transform 1s ease-out;
    -webkit-transform: perspective(200px)
        rotateX(0deg)
        translate3d(0, 0,0);
    -webkit-transform-style: preserve-3d;
}
.parent:hover .box2 {
    -webkit-transform: perspective(200px)
        rotateX(360deg)
        translate3d(100px, 0,0);
}