Transforms

2D Transform

• translate

• scale

• rotate

• skew

• Matrix

• Have X and Y specific ones for each

.letters {
  /* Space seperated list */
    transform: 
        translate(-90px, 0px)     /*hor, ver*/            
      rotate(90deg) 
      scale(0.25, 0.75)/*w, h*/
      skew(5deg, 5deg)
}

Can use any of these, this order does matter and each operation is done in that order. Recall graphics/matrix manipulation translating than rotating is different from rotating than translating. Rotates about center of image though not origin, and translates on its current axises

In React

<div
  className="duration-1000 hover:bg-green-200"
  style={{ scale: 1.1 }}
  >
  Im so alone
</div>

3D Transform

https://3dtransforms.desandro.com/carousel

• translate3d

• scale3d

• rotate3d

• matrix3d

• perspective: none | length(in px from eyeball)

• Transform-origin: length | keyterm(1, 3) where do you rotate/transform from i.e(top left then rotate rotates about top left corner )

• transform-style: flat | preserve-3d how to handle nested elements

• Perspective-origin: pos relative to viewer(i.e top left)

• Backface-visibility: visible | hidden do you show back of image if rotated

3D requires perspective goes first in transform or can be sole attribute by parent