How to replicate CSS transform in vertex shader

Questions
1

I need to replicate the following CSS transformations in a vertex shader :

  • width / height: Should correspond to widthUniform / meshResUniform.
  • scaleX / scaleY
  • translateX / translateY / translateZ
  • rotateX / rotateY / rotateZ
  • skewX / skewY

I want to follow GSAP’s transform order, which matches CSS:
translate(XYZ) → rotateZ → rotateY → rotateX → skew(XY) → scale(XY)

However, since matrix transformations are applied in reverse order in shaders, do I need to invert this order when implementing it ?

Also, where should the width and height transformations be placed in the chain ? I’m not sure how to incorporate them correctly.

Any guidance would be appreciated !

2

I created three-css-layout a while back. You might find this utility function useful, cssTransformToMatrix4.ts. Given a CSS transform property, it converts it into a Matrix4.

Keep in mind that CSS can be tricky, especially how it handles transform-origin, which isn’t always intuitive. It took a lot of trial and error to get it right!

6 Likes
3

Amazing, thanks, I’ll take a look at it.

1 Like