transform3d

by Johan Muller

HTML

<div id="stage" class="perspective">
        <div class="facet">1</div>
        <div class="facet">2</div>
        <div class="facet">3</div>
    </div>

CSS

#stage{
    background: rgba(200,200,200,.3);
    margin:0rem auto;
    padding: 0rem 0 1rem 0;
    z-index:1;
    width:500px;
}

.facet, .plane{
    padding: 1rem;
    margin: 1rem auto;
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
    width: 100px;
    text-align: center;
    display:inline-block;
}

.facet:first-child, .plane:first-child{
    background: rgba(255,102,255,.7);
}
.facet:nth-child(2), .plane:nth-child(2){
    background: rgba(255,204,0,.7);
}
.facet:nth-child(3), .plane:nth-child(3){
    background: rgba(0,0,255,.7);
}

.perspective{
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
        -ms-perspective: 500px;
            perspective: 500px;
}	
	.facet{ 
		-webkit-transform: rotate3d(0,-10,0,-45deg);
		   -moz-transform: rotate3d(0,-10,0,-45deg);
			-ms-transform: rotate3d(0,-10,0,-45deg);
				transform: rotate3d(0,-10,0,-45deg);
	}