Exemple de code de la fonction CSS scale3d().

<style type="text/css">
.conteneur .element1 {
  -ms-transform : rotateX(30deg); 
  -o-transform : rotateX(30deg); 
  -moz-transform : rotateX(30deg); 
  -webkit-transform : rotateX(30deg); 
  transform : rotateX(30deg); 
}
.conteneur .element2 {
  -ms-transform : rotateX(30deg) scale3d(1.2,1.3,1.4); 
  -o-transform : rotateX(30deg) scale3d(1.2,1.3,1.4); 
  -moz-transform : rotateX(30deg) scale3d(1.2,1.3,1.4); 
  -webkit-transform : rotateX(30deg) scale3d(1.2,1.3,1.4); 
  transform : rotateX(30deg) scale3d(1.2,1.3,1.4); 
}
.conteneur .element3 {
  -ms-transform : rotateX(30deg) scale3d(-0.5,-0.5,-0.5); 
  -o-transform : rotateX(30deg) scale3d(-0.5,-0.5,-0.5); 
  -moz-transform : rotateX(30deg) scale3d(-0.5,-0.5,-0.5); 
  -webkit-transform : rotateX(30deg) scale3d(-0.5,-0.5,-0.5); 
  transform : rotateX(30deg) scale3d(-0.5,-0.5,-0.5); 
}
.conteneur .element4{
  -ms-transform : rotateX(30deg) scale3d(-0.5,1,1); 
  -o-transform : rotateX(30deg) scale3d(-0.5,1,1); 
  -moz-transform : rotateX(30deg) scale3d(-0.5,1,1); 
  -webkit-transform : rotateX(30deg) scale3d(-0.5,1,1); 
  transform : rotateX(30deg) scale3d(-0.5,1,1); 
}
.conteneur .element4-s{
  -ms-transform : rotateX(30deg) scaleX(-0.5); 
  -o-transform : rotateX(30deg) scaleX(-0.5); 
  -moz-transform : rotateX(30deg) scaleX(-0.5); 
  -webkit-transform : rotateX(30deg) scaleX(-0.5); 
  transform : rotateX(30deg) scaleX(-0.5); 
}
.conteneur .element5 {
  -ms-transform : rotateX(30deg) scale3d(1,-0.5,1); 
  -o-transform : rotateX(30deg) scale3d(1,-0.5,1); 
  -moz-transform : rotateX(30deg) scale3d(1,-0.5,1); 
  -webkit-transform : rotateX(30deg) scale3d(1,-0.5,1); 
  transform : rotateX(30deg) scale3d(1,-0.5,1); 
}
.conteneur .element5-s{
  -ms-transform :  rotateX(30deg) scaleY(-0.5); 
  -o-transform :  rotateX(30deg) scaleY(-0.5); 
  -moz-transform :  rotateX(30deg) scaleY(-0.5); 
  -webkit-transform :  rotateX(30deg) scaleY(-0.5); 
  transform :  rotateX(30deg) scaleY(-0.5); 
}
.conteneur .element6 {
  -ms-transform :  rotateX(30deg) scale3d(1,1,-0.5); 
  -o-transform :  rotateX(30deg) scale3d(1,1,-0.5); 
  -moz-transform :  rotateX(30deg) scale3d(1,1,-0.5); 
  -webkit-transform :  rotateX(30deg) scale3d(1,1,-0.5); 
  transform :  rotateX(30deg) scale3d(1,1,-0.5); 
}
.conteneur .element6-s{
  -ms-transform :  rotateX(30deg) scaleZ(-0.5); 
  -o-transform :  rotateX(30deg) scaleZ(-0.5); 
  -moz-transform :  rotateX(30deg) scaleZ(-0.5); 
  -webkit-transform :  rotateX(30deg) scaleZ(-0.5); 
  transform :  rotateX(30deg) scaleZ(-0.5); 
}

.conteneur:hover .element2,
.conteneur:hover .element3,
.conteneur:hover .element4,
.conteneur:hover .element5,
.conteneur:hover .element6{
  transform: rotateX(30deg) scale3d(1,1,1); 
}
.conteneur:hover .element4-s{
  -ms-transform:  rotateX(30deg) scaleX(1); 
  -o-transform:  rotateX(30deg) scaleX(1); 
  -moz-transform:  rotateX(30deg) scaleX(1); 
  -webkit-transform:  rotateX(30deg) scaleX(1); 
  transform:  rotateX(30deg) scaleX(1); 
}
.conteneur:hover .element5-s{
  -ms-transform : rotateX(30deg) scaleY(1) ; 
  -o-transform : rotateX(30deg) scaleY(1) ; 
  -moz-transform : rotateX(30deg) scaleY(1) ; 
  -webkit-transform : rotateX(30deg) scaleY(1) ; 
  transform :  rotateX(30deg) scaleY(1) ; 
}
.conteneur:hover .element6-s{
  -ms-transform : rotateX(30deg) scaleZ(1) ; 
  -o-transform : rotateX(30deg) scaleZ(1) ; 
  -moz-transform : rotateX(30deg) scaleZ(1) ; 
  -webkit-transform : rotateX(30deg) scaleZ(1) ; 
  transform : rotateX(30deg) scaleZ(1) ; 
}

.conteneur {
  padding: 15px; 
  height : 150px; 
  margin-bottom : 5px; 
}

.parent-element {
  padding : 2px; 
 
  -moz-perspective : 150px; 
  -webkit-perspective : 150px; 
  perspective : 150px; 

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

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


.filst {
  display : inline-block; 
  width : 100px; 
  height : 100px; 
  background-image: url(/img/screenshot_css/fd_100_chiffres.png); 
  border : 1px solid #ccc; 

  -ms-transition : -ms-transform 3s ; 
  -o-transition : -o-transform 3s ; 
  -moz-transition : -moz-transform 3s ; 
  -webkit-transition : -webkit-transform 3s ; 
  transition : transform 3s ; 
  overflow : hidden; 
}

</style>
Passer votre curseur sur la zone
<div class="conteneur">
  <div class="parent-element">
    <span class="filst element1">Aucune</span>
    <span class="filst element2">scale3d(1.2,1.3,1.4)</span>
    <span class="filst element3">scale3d(-0.5,-0.5,-0.5)</span>
    <span class="filst element4">scale3d(-0.5,1,1)</span>
    <span class="filst element4-s">scaleX(-0.5)</span>
    <span class="filst element5">scale3d(1,-0.5,1)</span>
    <span class="filst element5-s">scaleY(-0.5)</span>
    <span class="filst element6">scale3d(1,1,-0.5)</span>
    <span class="filst element6-s">scaleZ(-0.5)</span>
  </div>
</div>