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
commentaires