[CSS] Translate

트랜스폼을 잘해야 인터랙션도 쓰리디도 더 잘 이해하니까!

다른 CSS는 필요할 때 찾아보는 거로 하고 transform만 따로 정리해보려함

---

CSS transform이 좋은 이유는 하드웨어 가속을 이용(즉, GPU 사용)해서 성능이 좋음
position : absolute로 포지션값으로 이동시키는 것보다, translate로 이동시키는 게 네이티브앱 수준으로 부드럽게 움직인다는 확연한 차이가 있음

translate()

double values => vector [tx, ty]
single values => vector [tx, 0]

.parent:hover > .translate {
        /* transform: translate(3em, 100px); */ 
        transform: translate(100px, 100px);
    }

translateX()

.parent:hover > .translateX {
        transform: translateX(100%);
    }

translateY()

웃긴 건 방향이 반대다(?)
음수가 위방향, 양수가 아래방향이다

.parent:hover > .translateY {
        transform: translateY(70px);
    }

translateZ (영원히 안녕...✨)

아 왜 없애는데 ㅠㅠ

어떤 친구였는지 보여주자면

가만 생각해보니 없앨만 했네? 인정한다

translate3d

translate3d(tx, ty, tz)
x, y는 length, % 둘 다 가능인데 z는 length ONLY

아니 z를 그렇게 쓸 거면 그럼 메소드명 다시 지으셈...
3d 느낌이 안 나잖음! 따지고보면 2d인데..
tz는 tx,ty가 어느 방향으로 이동할지 정하는 length인 거면

transform: translateX(50%, 50%)

랑 뭐가 다름... 차이를 못 느끼겠는데.. 아시는 분은 plz..

.parent:hover > .translate3d {
        transform: translate3d(50%, 50%, 100px);
    }