Edit on
<div class="container">
  <div class="box one">
    <div class="x">X</div>
    <div class="y">Y</div>
    <div class="name">1</div>
  </div>
</div>
<div class="container">
  <div class="box two">
    <div class="x">X</div>
    <div class="y">Y</div>
    <div class="name">2</div>
  </div>
</div>
<div class="container">
  <div class="box three">
    <div class="x">X</div>
    <div class="y">Y</div>
    <div class="name">3</div>
  </div>
</div>
.one {
  transform-origin: top left;
  transform:rotateY(45deg);
}
.two {
  transform-origin: top center;
  transform:rotateY(45deg);
  
}
.three {
  transform-origin: top right;
  transform:rotateY(45deg);
  transform-origin: top left;
}

/* ------------------------------------------- */

.container {
	perspective: 800px;
	width: 200px;
	margin: 20px;
  float:left;
  border:1px solid grey;
}

.box {	
  background: #222;
  position:relative;
	width: 200px;
	height: 200px;
  border:1px solid white;
  color:#fff;
}

.x {
  position:absolute;
  left:100px;
  bottom:5px;
}
.y {
  position:absolute;
  top:100px;
  left:5px;
}
.name {
  position:absolute;
  top:100px;
  left:98px;
}
Rerun