91.980 visiteurs depuis la création

TRANSLATION VERTICALE, HORIZONTALE PUIS CIRCULAIRE DE PLUSIEURS ELEMENTS AVEC UN CURSEUR.

par André Marini 17 Février 2015, 10:40 Images

Effets de translation verticale horizontale et circulaire de trois éléments avec un curseur qui définit l'angle de rotation.

CODE

<input type="range" min="0" max="360" value="0" oninput="rotateDiv(this.value); resultatRotate.value = this.value;" />
<output id="resultatRotate">0</output>

<div id="DivRotX" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#0000FF; opacity:0.8;">BLEU
</div>
<div id="DivRotY" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#FFFFFF; opacity:0.8;">BLANC
</div>
<div id="DivRotZ" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#FF0000; opacity:0.8;">ROUGE
</div>

<script type="text/javascript">
DRx = document.getElementById('DivRotX');
DRy = document.getElementById('DivRotY');
DRz = document.getElementById('DivRotZ');

function rotateDiv(valeur){
   DRx.style.WebkitTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.MozTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.OTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.msTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.transform = 'RotateX('+ valeur + 'deg)';

   DRy.style.WebkitTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.MozTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.OTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.msTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.transform = 'RotateY('+ valeur + 'deg)';

   DRz.style.WebkitTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.MozTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.OTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.msTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.transform = 'RotateZ('+ valeur + 'deg)';
}
</script>