CODELAB

코드랩은 디자인과 코드 뿐만 아니라 다양한 생각을 공유하며 소통하고, 여러가지 기회도 만들어보고, 공부도 하려는 목적으로 시작된 '2인 아이디어 동아리'입니다.

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.


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

    근데 구버전 브라우저를 지원하지 않아서....
    1. 아~ 3D가 더 부드럽게 처리된다는 사실은 몰랐네요. 저는 2D가 아무래도 자원을 조금 덜 잡아먹지 않을까 생각했었거든요ㅎㅎ 감사해요~!
작성완료