ICI header("Location: http://www.mytesting.fr ");

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

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

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

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> 

 

RESULTAT

0

BLEU
BLANC
ROUGE

commentaires

Haut de page