Box rotate

by lovromar

HTML

<div class="wrap">
    <div></div>
    <div></div>
</div>
<div class="wrap">
    <div></div>
    <div></div>
</div>
<div class="wrap">
    <div></div>
    <div></div>
</div>

CSS

.wrap {
    float: left;
    height: 100px;
    margin: 50px;
    -webkit-transform: perspective(500);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .5s;
}
.wrap div {
    background-color: hsla(0,0%,0%,.25);
    box-shadow: inset 0 0 0 2px hsla(0,0%,0%,.5);
    height: 100px;
    width: 100px;
}
.wrap div:last-child {
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0;
}
.wrap:hover {
    -webkit-transform: perspective(500) rotateX(90deg) translateY(-50px) translateZ(50px);
}