Exemple de code de la fonction CSS perspective().

<style type="text/css">
.parent-element {
  display: block; 
  margin-bottom: 5px; 
  padding: 2px; 

  -moz-perspective : none; 
  -webkit-perspective : none; 
  perspective : none; 

  -moz-perspective-origin: 0px 0px; 
  -webkit-perspective-origin: 0px 0px; 
  perspective-origin: 0px 0px; 

  transition: transform 5s linear, perspective-origin 5s linear, perspective 5s linear; 
}

.conteneur>.parent-element {
  background-color: rgba(179, 179, 179, 0.5); 
}

.transform-style-preserve {
  -moz-transform-style : preserve-3d; 
  -webkit-transform-style : preserve-3d; 
  transform-style : preserve-3d; 
}

.conteneur {
  padding: 15px; 
  width: 500px; 
  margin-bottom: 5px; 
  border: 1px solid #ccc; 
}

.fils:before {
  content: ''; 
  display: block; 
  width: 20px; 
  height: 20px; 
  padding: 5px; 
  background: rgba(255, 0, 0, 1); 

  -o-transform: rotateY(15deg); 
  -ms-transform: rotateY(15deg); 
  -moz-transform: rotateY(15deg); 
  -webkit-transform: rotateY(15deg); 
  transform: rotateY(15deg); 
}

.fils {
  display: inline-block; 
  width: 100px; 
  height: 100px; 
  background-color: rgba(255, 216, 0, 0.2); 
  border: 1px solid red; 

  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 

  transition: transform 3s; 
  /*, perspective-origin 5s linear, perspective 5s linear*/; 
}

.fils .fils {
  background-color: rgba(78, 225, 0, 0.2); 
}

.conteneur .element1 {
  -o-transform: perspective(150px) translateZ(0px); 
  -ms-transform: perspective(150px) translateZ(0px); 
  -moz-transform: perspective(150px) translateZ(0px); 
  -webkit-transform: perspective(150px) translateZ(0px); 
  transform: perspective(150px) translateZ(0px); 
}

.conteneur .element2 {
  -o-transform: perspective(150px) translateZ(-10px); 
  -ms-transform: perspective(150px) translateZ(-10px); 
  -moz-transform: perspective(150px) translateZ(-10px); 
  -webkit-transform: perspective(150px) translateZ(-10px); 
  transform: perspective(150px) translateZ(-10px); 
}

.conteneur .element3 {
  -o-transform: perspective(150px) translateZ(-20px); 
  -ms-transform: perspective(150px) translateZ(-20px); 
  -moz-transform: perspective(150px) translateZ(-20px); 
  -webkit-transform: perspective(150px) translateZ(-20px); 
  transform: perspective(150px) translateZ(-20px); 
}

.conteneur2 .element1 {
  -o-transform: translateZ(0); 
  -ms-transform: translateZ(0); 
  -moz-transform: translateZ(0); 
  -webkit-transform: translateZ(0); 
  transform: translateZ(0); 
}

.conteneur2 .element2 {
  -o-transform: translateZ(-10px); 
  -ms-transform: translateZ(-10px); 
  -moz-transform: translateZ(-10px); 
  -webkit-transform: translateZ(-10px); 
  transform: translateZ(-10px); 
}

.conteneur2 .element3 {
  -o-transform: translateZ(-20px); 
  -ms-transform: translateZ(-20px); 
  -moz-transform: translateZ(-20px); 
  -webkit-transform: translateZ(-20px); 
  transform: translateZ(-20px); 
}

.conteneur3 .element1 {
  -o-transform: perspective(150px) translateZ(0px); 
  -ms-transform: perspective(150px) translateZ(0px); 
  -moz-transform: perspective(150px) translateZ(0px); 
  -webkit-transform: perspective(150px) translateZ(0px); 
  transform: perspective(150px) translateZ(0px); 
}

.conteneur3 .element2 {
  -o-transform: perspective(150px) translateZ(-10px); 
  -ms-transform: perspective(150px) translateZ(-10px); 
  -moz-transform: perspective(150px) translateZ(-10px); 
  -webkit-transform: perspective(150px) translateZ(-10px); 
  transform: perspective(150px) translateZ(-10px); 

}

.conteneur3 .element3 {
  -o-transform: perspective(150px) translateZ(-20px); 
  -ms-transform: perspective(150px) translateZ(-20px); 
  -moz-transform: perspective(150px) translateZ(-20px); 
  -webkit-transform: perspective(150px) translateZ(-20px); 
  transform: perspective(150px) translateZ(-20px); 
}

.perspective-parent {
  -moz-perspective: 150px; 
  -webkit-perspective: 150px; 
  perspective: 150px; 

  -moz-perspective-origin: 0px 0px; 
  -webkit-perspective-origin: 0px 0px; 
  perspective-origin: 0px 0px; 
}

.conteneur2 .fils {
  border: 1px solid #000; 
}
.conteneur1 .element2,
.conteneur1:hover .element2 {
  perspective-origin: 0px 0px; 
  -o-transform: perspective(20000px) translateZ(10px); 
  -ms-transform: perspective(20000px) translateZ(10px); 
  -moz-transform: perspective(20000px) translateZ(10px); 
  transform: perspective(20000px) translateZ(10px); 
  transform: perspective(20000px) translateZ(10px); 
}
.conteneur2 .element2,
.conteneur2:hover .element2 {
  -o-transform: translateZ(10px); 
  -ms-transform: translateZ(10px); 
  -moz-transform: translateZ(10px); 
  -webkit-transform: translateZ(10px); 
  transform: translateZ(10px); 
}
.conteneur3 .element2,
.conteneur3:hover .element2 {
  -o-transform: perspective(20000px) translateZ(10px); 
  -ms-transform: perspective(20000px) translateZ(10px); 
  -moz-transform: perspective(20000px) translateZ(10px); 
  -webkit-transform: perspective(20000px) translateZ(10px); 
  transform: perspective(20000px) translateZ(10px); 
}
</style>
parent-element sans propriété perspective
<br>fils{ transform: perspective(150px) translateZ(x); }
<div class="conteneur conteneur1">
<div class="parent-element transform-style-preserve">
  <span class="fils element1">Fils 1</span> <span class="fils element2">Fils 2</span> <span class="fils element3">Fils 3
    <span class="parent-element transform-style-preserve">
      <span class="fils element1">Fils 12</span> <span class="fils element2">Fils 22</span> <span class="fils element3">Fils 32</span>
    </span> </span>
</div>
</div>
parent-element{ perspective : 150px; perspective-origin : 0px 0px; }
<br>fils{ transform:  translateZ(x)  }
<div class="conteneur conteneur2">
<div class="parent-element perspective-parent transform-style-preserve">
  <span class="fils element0" style="border-color: green">Fils 0</span> <span class="fils element1" style="border-color: green">Fils 1</span> <span class="fils element2">Fils 2</span> <span class="fils element3">Fils 3
    <span class="parent-element transform-style-preserve">
      <span class="fils element1">Fils 12</span> <span class="fils element2">Fils 22</span> <span class="fils element3">Fils 32</span>
    </span> </span>
</div>
</div>
parent-element{ perspective : 150px; perspective-origin : 0px 0px; }
<br>fils{ transform: perspective(150px) translateZ(0px); }
<div class="conteneur conteneur3">
<div class="parent-element perspective-parent transform-style-preserve">
  <span class="fils element0">Fils 0</span> <span class="fils element1" style="border-color: green">Fils 1</span> <span class="fils element2">Fils 2</span> <span class="fils element3">Fils 3
    <span class="parent-element transform-style-preserve">
      <span class="fils element1">Fils 12</span> <span class="fils element2">Fils 22</span> <span class="fils element3">Fils 32</span>
    </span> </span>
</div>
</div>