28172 sujets

CSS et mise en forme, CSS3

Rotation autour d'un vecteur directeur en css

Bonjour,
Est-il possible de faire tourner, en css, plusieurs objets autour d'un vecteur directeur (x,y,z) quelconque et ne passant pas nécessairement par l'origine du repère (là je suppose qu'il faut juste changer la position du repère avant de faire la rotation ?)

Je n'ai pas réussi à le faire avec "transform-origin" et "transform:rotate()" mais je ne suis pas sûr de comment l'utiliser. A chaque fois l'objet tourne autour de son centre...

Merci
Bonjour,

Merci à vous deux pour vos réponses.

Je me suis mal exprimé (j'avais fait une page d'explications trop longue à lire, et j'ai trop simplifié ensuite !).

Prenons l'exemple du cube de parsimonhi : on voit qu'il tourne autour de son centre. J'aimerais qu'il tourne autour d'une de ses arrêtes (et donc le centre du cube va décrire un cercle autour de l'axe de rotation de rayon égal à la demi-longueur d'une arrête du cube).

Et si possible avec une contrainte supplémentaire :
Quand un objet tourne autour d'un point il peut rester toujours orienté pareil, ou bien il peut faire un tour sur lui-même pendant une révolution (exemple la lune).
Si je prends un axe de rotation quelconque loin du cube, j'aimerais que le cube se comporte comme la lune, donc présentant toujours le même profil à l'axe de rotation.

Je suis conscient que c'est de la physique là, je ne suis pas sûr qu'avec uniquement du css on arrive à satisfaire ce besoin...

Merci.
Merci _laurent.

Avec ton exemple j'ai réussi à faire tourner le carré comme je veux :
.cube2 {
transform-origin: right 50%;
transform-origin: 150px 150px;
}
puis CTRL + Enter pour prendre en compte la modif

Par contre pour le cube de l'exemple de parsimonhi (https://jsfiddle.net/parsimonhi/u195gnd2/) je n'y suis pas arrivé (j'ai mis transform-origin: 150px 150px; un peu partout et c'est comme si je ne faisais rien : pas sûr que le CTRL+Enter soit pris en compte...)
Modérateur
Alors si tu fais :

.cube2 {
transform-origin: right 50%;
transform-origin: 150px 150px;
}

La deuxieme ligen écrase la premier alors autant faire directement :
.cube2 {
transform-origin: 150px 150px;
}

Ce qui va placer le centre de rotation a 150px vers la droite et 150px vers le bas du coin haut gauche du carré.

Si tu veux rajouter un transform-origin au cube de l'exemple c'est sur #cube qu'il faut le mettre (sur l'élément qui a le transform rotate quoi) : https://jsfiddle.net/undless/9a78ts2m/1/
Modérateur
Bonjour,

Dans mon exemple du cube, le principe est que "ça" tourne autour de l'axe dessiné en gris.

Pour faire tourner le cube autour d'une de ses arrêtes, il suffit donc de "dessiner" le cube avec une arrête commune avec cet axe. Par exemple (j'ai réduit la taille du cube par 2 au passage) :
https://jsfiddle.net/parsimonhi/hL3027ft/

EDIT: pour ceux qui aurait déjà essayé le code, j'avais "oublié" de sauvegarder le fiddle. Maintenant, c'est bon ! Smiley confused

Après, chaque cas est particulier. Mais on notera que pour n'importe quelle forme le principe reste le même.

EDIT: j'ai oublié de préciser qu'initialement, il faut imaginer que l'axe en gris coincide avec l'axe de abscisses (vecteur directeur (1,0,0)). Ensuite on dessine le cube avec une arrête commune avec cet axe. Ensuite, on fait une rotation animée autour de cet axe. Et enfin, on déplace le tout pour que l'axe de référence ne soit plus l'axe des abscisse, mais un axe de vecteur directeur quelconque.

Amicalement
Modifié par parsimonhi (23 Oct 2020 - 12:30)
Modérateur
_laurent a écrit :
Salut,

Ta première intuition était la bonne il faut passer par transform-origin pour bouger le centre de la rotation.


C'est aussi possible d'utiliser transform-origin (mais bon, on peut tout à fait s'en passer si on dessine directement l'objet au bon endroit).

Amicalement,
Merci pour vos conseils.

Donc c'est possible de faire tourner un cube autour d'une de ses arrêtes.

Encore une question :
Peut-on enchainer une rotation de 30° degrés autour d'une arrête, puis de 30° autour d'une autre arrête ? (d'un cube en 3D)


============================================================================
Note pour info :

L'animation d'un cube en rotation en css est spectaculaire et je m'étais demandé si je pouvais visualiser de cette façon des rotations simultanées autour de 3 arrêtes (d'un même coin du cube). L'idée était de faire des rotations partielles autour de chaque arrête (sachant que l'ordre des rotations a son importance) et de voir les différences de trajectoire en fonction de l'angle de rotation partielle choisi.

Ensuite (mais déjà uniquement la première phase avec un seul cube m'aurait été très utile) l'idée était de mettre 2 cubes en rotation(s), mais en plus chaque cube entrainant l'autre dans ses rotation(s).

J'ai regardé des logiciels de calcul numérique et j'ai eu l'impression que je risquais de perdre beaucoup de temps à les maîtriser pour ensuite arriver à la conclusion qu'ils ne sont pas capables de faire l'animation Smiley ohwell

Avec les CSS je profitais du moteur du navigateur pour faire l'animation, mais il me semble que ce sera extrêmement difficile voir impossible à réaliser. Car la position des axes de rotation change à chaque itération (une boucle javascript modifiant dynamiquement le css ?)


J'ai fini par faire les calculs avec un tableur en retenant pour chaque cube 3 vecteurs directeurs, puis en appliquant les rotations successives. J'obtiens les positions spatiales de ces vecteurs au cours du temps, et il y a 'pu ka" afficher l'animation (peut-être la solution de visualisation la plus facile).
Mais je suis victime très rapidement de l'effet papillon, les erreurs minimes d'arrondis dans les fonctions trigonométriques deviennent exponentiellement trop importantes, principalement lorsque je fais tendre chaque rotation partielle vers zéro pour obtenir une trajectoire de plus en plus juste. Conclusion : plus je veux être exact et plus j'ai d'erreurs ce qui est un comble. Bon, bref, c'est pour ça que j'ai pensé à profiter du moteur des navigateurs pour accomplir la tâche...
Modérateur
Hello, si c'est pour faire tourner un lune autour d'une axe, une idée pourrait aussi être d'utiliser anmiateMotion pour faire tourner la forme oval et d'y ajouter un cercle avec une petite transition sur un transform scale pour avoir cette impression de perspective…Enfin, c'est l'idée que j'ai si je pense à faire un effet d'orbite Smiley smile
Modifié par Yordi (23 Oct 2020 - 14:52)
Modérateur
Bonjour,

Yordi a écrit :
Hello, si c'est pour faire tourner un lune autour d'une axe, une idée pourrait aussi être d'utiliser anmiateMotion pour faire tourner la forme oval et d'y ajouter un cercle avec une petite transition sur un transform scale pour avoir cette impression de perspective…Enfin, c'est l'idée que j'ai si je pense à faire un effet d'orbite Smiley smile


+1, sauf que (malheureusement ?), les animations basées sur les balises SVG pourraient disparaitre d'un moment à l'autre (il y a une tendance de fond consistant à remplacer ce que font ces balises par du css). Cela me semble un peu risqué d'utiliser cette balise.

Par contre, on peut faire la même chose avec du css. Voir https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/

Du coup, du point de vue fonctionnel, c'est une excellente idée à creuser.

Amicalement,
@parsimonhi : j'ai essayé d'enchainer plusieurs rotations à 45 degrés. Les résultats n'ont pas été convaincants (ou bien c'est moi qui m'y suis mal pris). Je ressayerai avec plus de temps.

Merci à tous.
Sujet clos
Aller à