본문 바로가기

아카이브/HTML/CSS

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.


  • wallel 2015.11.27 13:10 신고

    3d 가 브라우저에서 처리할 때 더 부드럽게 처리된다고 본 적이 있습니다.

    근데 구버전 브라우저를 지원하지 않아서....

    • 구름강아지 2015.11.30 18:42 신고

      아~ 3D가 더 부드럽게 처리된다는 사실은 몰랐네요. 저는 2D가 아무래도 자원을 조금 덜 잡아먹지 않을까 생각했었거든요ㅎㅎ 감사해요~!