CSS3 2D Transforms Module Example

W3C CSS 2D Transforms Module Level 3(working draft) 예제입니다. 스펙이 완성되지 않아서 제조사 접두어(-moz, -o-, -webkit-, -ms-)를 사용하였습니다.

non-transformed

트랜스폼이 적용되지 않은 박스입니다.

transform

트랜스폼 함수(transform function)를 값으로 하여 2D 트랜스폼을 적용합니다. 트랜스폼 함수는 SVG의 것과 비슷합니다.

div {
	trasform: scale(0.7);
}

transform-origin

트랜스폼의 기준점을 변경할 수 있게 해줍니다.

div {
	trasform: scale(0.7);
	trasform-origin: 0 0;
}

transform functions

transform 속성의 값으로 사용할 수 있는 트랜스폼 함수들입니다.

transform: matrix(1, 0, 0, 1, 10, 10);

transform: translate(10px, 10px);

transform: translateX(10px);

transform: translateY(10px);

transform: scale(1.5);

transform: scaleX(1.5);

transform: scaleY(1.5);

transform: rotate(45deg);

transform: skewX(30deg);

transform: skewY(30deg);