Gecko와 Webkit의 CSS Transform 테스트

Gecko 엔진에서도 CSS Transform 기능이 추가되었다는 소식을 듣고 테스트해보았다. 특히 나는 CSS에서 left: 50% + 20px;과 같은 다른 단위끼리의 간단한 사칙연산을 지원해주었으면 하는 생각을 가지고 있었고, left 속성과 transform 중 linear traslation을 조합하면 해당 기능을 구현할 수 있으리란 생각이 들었기 때문이다.

직접 간단한 예제를 만들어 테스트해본 결과 예상대로 제대로 동작함을 확인할 수 있었다. 오오 ㅠ_ㅠb

Gecko와 Webkit의 CSS Transform 테스트

일단 transform 속성 중 위치를 변경시키는 translate 자체는 거의 100% 호환되는 듯하나, 불행히도(?) rotate시킬 때 어느 점을 기준으로 하는지는 약간 차이가 있는 것 같다.

실제 테스트 페이지도 따로 볼 수 있도록 만들었다. 여기 클릭.

IE에서도 DXImageTransform.Microsoft.Matrix 필터를 이용해 이런 transform이 가능하기는 한데, 직접 해보니 rotation의 경우 원래 블록이 차지하던 영역 밖으로 벗어나는 부분이 그대로 짤려버려서 매우 보기 흉하고, 특히 직접 회전변환 행렬을 계산해서 넣어줘야 한다는 점이 개발자 입장에서 매우 불편하다.

사실상 두 엔진의 transform 속성이 거의 똑같은 문법으로 동작하는만큼 이 기능이 CSS3 표준에 포함되었으면 좋겠다.