# Transforms

## 2D Transform

* translate
* scale
* rotate
* skew
* Matrix
* Have X and Y specific ones for each

```css
.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

```jsx
<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