transform을 이용한 3d 기법

CSS3의 transform은 웹사이트 UX를 향상시키는데 아주 중요한 역할을 하고 있는데요. 저는 transform2d만을 사용해왔는데 이참에 공부하고자 3d사용법에 대해서 구글링을 좀 하면서 다양한 사용법을 살펴봤는데 역시나 재미있게 표현하는 사람들이 많더라고요. 그래서 저도 몇가지 사이트를 참조하면서 코드를 하나 짜봤습니다.

css3 tranform3d 개념 이해하기 http://www.w3schools.com/css/css3_3dtransforms.asp

css3 tranform3d 시뮬레이션 할 수 있는 웹사이트 http://css3.bradshawenterprises.com/transforms/

perspective 시뮬레이션 할 수 있는 웹사이트 http://hanbit.co.kr/exam/1955/perspective.htm

*크롬에서 작동합니다.

See the Pen ojVjdY by jisungyoo (@mainplay) on CodePen.

저작자표시비영리변경금지