rotate3d abréviation

Comment combiner rotateX(50deg) rotateY(20deg) rotateZ(15deg) en sténographie rotate3d()?

OriginalL'auteur Artem Svirskyi | 2013-03-04

  1. 313

    rotateX(50deg) est équivalent à rotate3d(1, 0, 0, 50deg)

    rotateY(20deg) est équivalent à rotate3d(0, 1, 0, 20deg)

    rotateZ(15deg) est équivalent à rotate3d(0, 0, 1, 15deg)

    Donc...

    rotateX(50deg) rotateY(20deg) rotateZ(15deg)

    est équivalent à

    rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)

    Pour un générique rotate3d(x, y, z, α), vous avez la matrice

    rotate3d abréviation

    où

    rotate3d abréviation

    Vous pouvez maintenant obtenir les matrices pour chacune des 3 rotate3d transforme et vous les multiplier. Et la matrice est la matrice correspondant à l'unique qui en résulte rotate3d. Pas sûr de savoir comment il est facile d'extraire les valeurs de rotate3d hors de lui, mais il est sûr facile à extraire pour un seul matrix3d.

    Dans le premier cas (rotateX(50deg) ou rotate3d(1, 0, 0, 50deg)), vous avez:

    x = 1, y = 0, z = 0, α = 50deg

    De sorte que la première ligne de la matrice dans ce cas est 1 0 0 0.

    Le second est 0 cos(50deg) -sin(50deg) 0.

    Le troisième 0 sin(50deg) cos(50deg) 0.

    Et la quatrième est évidemment 0 0 0 1.

    Dans le second cas, vous avez x = 0, y = 1, z = 0, α = 20deg.

    Première ligne: cos(20deg) 0 sin(20deg) 0.

    Deuxième rangée: 0 1 0 0.

    Troisième rangée: -sin(20) 0 cos(20deg) 0.

    Quatrième: 0 0 0 1

    Dans le troisième cas, vous avez x = 0, y = 0, z = 1, α = 15deg.

    Première ligne: cos(15deg) -sin(15deg) 0 0.

    Deuxième ligne sin(15deg) cos(15deg) 0 0.

    Et la troisième et la quatrième ligne sont 0 0 1 0 et 0 0 0 1 respectivement.

    Note: vous avez peut-être remarqué que les signes du péché valeurs pour les rotateY transformer sont les mêmes que pour les deux autres transformations. Ce n'est pas une erreur de calcul. La raison pour cela est que, pour l'écran, vous avez l'axe des y vers le bas, pas vers le haut.

    Ce sont donc ces trois 4x4 matrices que vous avez besoin de multiplier afin d'obtenir le 4x4 matrice pour la suite de la seule rotate3d transformer. Comme je l'ai dit, je ne suis pas sûr de savoir comment il peut être facile d'obtenir les 4 valeurs, mais les 16 éléments dans la matrice 4x4 sont exactement les 16 paramètres de la matrix3d équivalent de la chaîne de transformation.

    MODIFIER:

    En fait, il s'avère que c'est assez facile... permet de calculer la trace (la somme des éléments de la diagonale) de la matrice pour la rotate3d de la matrice.

    4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)

    Vous ensuite de calculer la trace pour le produit des trois 4x4 matrices, vous correspondent le résultat avec 2 + 2*cos(α) vous extrait α. Ensuite, vous calculez x, y, z.

    Dans ce cas particulier, si j'ai calculé correctement, la trace de la matrice résultant du produit des trois 4x4 matrices va être:

    T = 
cos(20deg)*cos(15deg) + 
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + 
cos(50deg)*cos(20deg) + 
1

    Donc cos(α) = (T - 2)/2 = T/2 - 1, ce qui signifie que α = acos(T/2 - 1).

    Épique réponse est épique. Upvoted.
    ouais je ne sais même pas comment fait vérifier. J'ai été totalement aller jusqu'à ce que j'ai vu le péché. cause elle a ouvert mon esprit. quand j'ai vu le péché. shoutout ace of base
    Incroyable.
    regarde comme la meilleure réponse déjà donnée sur stackoverflow !!!!!!
    Notez que la rotation de la matrice est applicable que si la [x,y,z] vecteur est normalisé, c'est seulement si le vecteur de longueur Math.sqrt(x*x + y*y + z*z) est un. Si elle n'est pas normalisée, il peut être facilement converti en un normalisée, par la plongée chaque x, y et z par leur longueur.

    OriginalL'auteur Ana

  2. 15

    Syntaxe:

    rotate3d(x, y, z, a)

    Valeurs:

    • x
      Est un <number> décrivant la coordonnée x du vecteur indiquant l'axe de rotation.
    • y
      Est un <number> décrivant la coordonnée du vecteur indiquant l'axe de rotation.
    • z
      Est un <number> décrivant la coordonnée z du vecteur indiquant l'axe de rotation.
    • a
      Est un <angle> représentant l'angle de la rotation. Un angle positif indique une rotation dans le sens horaire, un angle négatif d'une des aiguilles d'une montre.

    Comme dans :

    .will-distort{
    transform:rotate3d(10, 10, 10, 45deg);
}

    Jouait ici

    Caniuse ici

    Plus de docs à ce sujet

    Répondu comme un monsieur. +1
    Peut-être que je suis épais, mais je pense qu'il est demandé pour un algorithme d'aller de l'enchaînement de se transformer en une seule rotate3d, pas pour la définition de rotate3d.
    Je pense qu'il veut savoir comment les combiner rotateX(50deg) rotateY(20deg de la température) rotateZ(15deg), en sténographie rotate3d() dans le CSS

    OriginalL'auteur Milche Patern

  3. 3

    La valeur exacte est rotate3d(133,32,58,58deg)

    Voir le violon (Pour chrome et Safari, aide -webkit-transform)

    Comment exactement avez-vous calculer?
    Je n'aime pas, c'est pourquoi votre réponse est 10x mieux 🙂

    OriginalL'auteur Bigood