How To Calculate Rotations in Matrix() and Matrix3d() CSS Functions

Опубликовано: 26 Октябрь 2024
на канале: Sir Chogyal

577

We can rotate the element using the rotateX(), rotateY(), and rotateZ() css functions. Alternatively, the same effect can be achieved using the matrix() and matrix3d() functions. All we have to do is apply some formulas.

RotateX:
transform: matrix(1, 0, 0, cosθ, 0, 0);
RotateY:
transform: matrix(cosθ, 0, 0, 1, 0, 0);
RotateZ:
transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);

RotateX:
transform: matrix3d(1, 0, 0, 0,
0, cosθ, sinθ, 0,
0, -sinθ, cosθ, 0,
0, 0, 0, 1);
RotateY:
transform: matrix3d(cosθ, 0, -sinθ, 0,
0, 1, 0, 0,
sinθ, 0, cosθ, 0,
0, 0, 0, 1);
RotateZ:
transform: matrix3d(cosθ, sinθ, 0, 0,
-sinθ, cosθ, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);

Responsive Web Design with HTML5 & CSS: https://amzn.to/3zBeSfp (Affiliate link)
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Join this channel to get access to perks:
   / @sirchogyal
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
❀ Support me on Patreon:   / sirchogyal
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
❀ Join me on Telegram: https://telegram.im/@code8home

❀ Facebook:   / code8home

❀ Merch on T-Spring: https://my-store-6057984.creator-spri...

❀ Visit my blog at http://c815.blogspot.com

▶️ Subscribe to this channel for more videos.