CSS3는 정말 동적인 표현이 무한(?) 가능하다.
다만 사용하고자 할 때 지원되지 않는 브라우저 버젼이 있으니 체크할 것.
CSS3와 제이쿼리가 만나니 엄청 재미진 것들이 가능해지더라.
3D에... 쉽게 가속도를 줄수 있는 큐브도 만들 수 있고
입체 오각도 만들 수 있고(오각은 계산이 좀 딥하게 들어가 머리터질뻔(?) 나만 그런가..)
너무 쉽게(?) 이런 표현들(3D)이 가능해져서
놀라울 따름이다.
이런 3D를 쓸 때 아니, 2D 또한 쓸 때
여기서 정말 중요한 꼭지점 역할 하는 것이 있으니 바로 transform-origin
이걸 뭐라... 딱 설명이 어렵다 그냥 나는 꼭지점? 이란 단어뿐이 생각 안난다.(글쓴이 언어능력 딸림)
예를들어 내가 큐브 3D를 하나 만들어서 큐브가 멋지게 돌아가는걸 만들고싶다.
(비유. 전자렌지 중심에 올리고 전자렌지 돌린거처럼)
근데 이 transform-origin이 잘 안잡히면 엄청 이상하게 돌아간다.
(비유. 전자렌지 정가운데 아닌 모퉁이에 올리고 돌리면 원이 그려지는데 그 모습이 흡사. 돌아가긴 하는데 가운데서 멋지게 도는게 아니고 막 크게 원을 그리며 돌아간다거나. 등..)
암튼.. 그래서 여기서 전자렌지 정 가운데 놓고 큐브를 돌리고자 할 때
이를 담당하는 것이 transform-origin
꼭지점, 축, 기준.. 이렇게 표현하면 맞나..
Syntax는
transform-origin: x-axis y-axis z-axis|initial|inherit;
여기서 axis를 축
즉 x축, y축, z축... 뭐 이런거
수II 시간에 배운 벡터를 생각하면 좀 쉬워진다.
x축, y축 그리고 z축...
큐브는 그럭저럭 쉽게 만들었는데..
이 축을 잡아 줄 수 있는데..
오각 3D를 만들었는데 자꾸 이상하게 돌더라..
그래서 고민해서 이래저래 해보니 z축을 조정해주니 안정감 있게 돌더라.
갑자기 오각형 가운데 중심점 구하려다가 그 싫어하던 탄젠트 공식까지 보게되었다는 ^^:;
이런거 다 필요 없고...
구글 치면 이미 고민해서 만들어 주신분들 꽤 있다.
역시 세계는 하나
그러면서 나는 transform-origin의 중요성을 배우고
이래저래 마크업해보며 테스트 해본다.
그냥 암만 읽어봤자 소용 없다.
무조건 마크업 연습 고고~