Chapitre 4
Galeries
Retour Accueil CSS
31 Cube pivotant dynamique.
Termes CSS clés employés : transform:translate(), transform:rotate().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Un cube, initialement statique, doit pouvoir être tourné dans toutes les directions par appui sur les touches fléchées du clavier.
Résolution pratique
Rien ne change par rapport au cas précédent en ce qui concerne le code HTML. Le code CSS se voit simplement amputé de la partie animation. Pour pouvoir gérer les mouvements de la souris (ou le toucher), il est toutefois indispensable de recourir à un script JavaScript. Celui présenté ici est adapté à partir de la création de Paul Hayes (http://www.paulrhayes.com/experiments/cube-3d/)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"<
</script>
<script>
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
var xAngle = 0, yAngle = 0;
$('body').keydown(function(evt) {
switch(evt.keyCode) {
case 37: // flèche gauche
yAngle -= 90;
break;
case 38: // flèche haut
xAngle += 90;
break;
case 39: // flèche droite
yAngle += 90;
break;
case 40: // flèche bas
xAngle -= 90;
break;
case 27: //echap
yAngle = 25;
xAngle = -110;
break;
default:
break;
};
document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});
</script>
Cube 3D interactif
Retour Accueil CSS
|
|
|---|