transform: perspective()

transform: perspective should be used with rotateY or rotateX to see any affect
The higher the number the more the perspective is indented along the Z-index path
pushing it further into the page while the lower the number the more it will come towards the viewer.
If that makes any sense ...?

.b1

.b1

.b2

.b3

.b3

.box{
width:140px;
height:200px;
text-align:center;
border:1px solid gray;
float:left;
margin: -8px;
background-color: GhostWhite;
transition-duration:2s;
}
.box:hover{
border:1px solid gray;
box-shadow: 0px 0px 3px #C2C2C2;
transform: rotateY(0deg) scale(1.1);
z-index:20;
}
.b1{
border-left: 5px solid #545454;
box-shadow: 20px 6px 3px rgba(43, 42, 42, 0.56);
transform:perspective(250px) rotateY(40deg);
}
.b2{
font-size:12px;
padding:2px;
}
.b3{
border-right: 7px solid #545454;
box-shadow: -15px 6px 3px rgba(43, 42, 42, 0.56);
transform: perspective(250px) rotateY(-40deg);
}