tailwind1-11  Exercise 2: Transforms in 2D and 3D
==================================================

page.html:

  <div id="s1" class="size-10 bg-red-500 scale-110"></div>
  <div id="s2" class="size-10 bg-red-500 rotate-45"></div>
  <div id="s3" class="size-10 bg-red-500 translate-x-4 -translate-y-2"></div>
  <div id="s4" class="size-10 bg-red-500 scale-x-150 skew-x-12"></div>
  <div id="s5" class="size-10 bg-red-500 origin-top-left rotate-45"></div>
  <div id="s6" class="size-10 bg-red-500 translate-x-1/2"></div>

  <div class="perspective-distant">
    <div id="d1" class="size-10 bg-blue-500 transform-3d rotate-x-45 rotate-y-12 translate-z-4"></div>
  </div>
  <div id="d2" class="size-10 bg-blue-500 backface-hidden rotate-y-180"></div>

Console (getComputedStyle):

  #s1  scale: 1.1                    bounding box 44 x 44
  #s2  rotate: 45deg                 bounding box 56.57 x 56.57
  #s3  translate: 16px -8px
  #s4  scale: 1.5 1                  transform: matrix(1, 0, 0.212557, 1, 0, 0)   (the skew)
  #s5  rotate: 45deg                 transform-origin: 0px 0px      (the default is 20px 20px)
  #s6  translate: 50%

  #d1  parent perspective: 1200px
       transform-style: preserve-3d
       translate: 0px 0px 16px
       transform: matrix3d(0.978148, 0.147016, -0.147016, 0, 0, 0.707107, 0.707107, 0, 0.207912, -0.691655, 0.691655, 0, 0, 0, 0, 1)
  #d2  backface-visibility: hidden

WHY THIS WORKS AS AN ANSWER
---------------------------
In Tailwind v4 scale, rotate and translate set the separate CSS properties of those names (so they combine without overriding each other and are transitioned individually), while skew and the
3D rotations go through the transform property, which is why #s4 shows both a scale and a matrix. A 40px square rotated 45 degrees has a bounding box of 40 x sqrt(2), about 56.57px, which
shows the transform takes effect visually; it does not change the layout. origin-top-left moves the pivot to the corner. For 3D, perspective belongs on the parent (1200px is perspective-distant);
the child needs transform-3d (preserve-3d) to live in that 3D space; the matrix3d value is the browser confirming a real rotation about X and Y, and translate-z-4 gave a 16px Z offset.
backface-hidden sets backface-visibility: hidden, which is the property flip cards rely on.