CSS perspective demo

HTML

<div class="container">
  <div id="foo-1">1</div>
</div>
<div class="container">
  <div id="foo-2">2</div>
</div>
<div>
  <div class="container">
    <div id="foo-2">2</div>  
  </div>
</div>

CSS

.container {
  perspective: 500px;
  height: 300px;
}

#foo-1 {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 300px;
  background-color: #ccc;
  transform: rotateX(45deg);
}

#foo-2 {
  position: fixed;
  left: 25%;
  width: 50%;
  height: 300px;
  background-color: #ccc;
  transform: rotateX(45deg);
}