정의 및 사용
변환 특성은 소자 2 차원 또는 3 차원 변환을 적용한다. 이 속성을 사용하면, 요소 등 스큐 규모, 이동, 회전 할 수 있습니다.
브라우저 지원
변환 속성은 인터넷 익스플로러 (10)와 파이어 폭스에서 지원됩니다.
인터넷 익스플로러 9는 대안을 지원의 msTransform 속성 (2D transforms only) .
오페라, 크롬과 사파리의 방법은 WebkitTransform 속성을 (3D 및 2D를 변환)를 지원합니다.
통사론
transform 속성을 반환합니다 :
object .style.transform 변환 속성을 설정합니다 :
object .style.transform="none| 속성 값 값 기술 none 아무런 변화가없는 것을 규정 matrix( n,n,n,n,n,n ) 여섯 개 값의 행렬을 이용하여 2 차원 변환을 정의 matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) 16 개 값의 4 × 4 행렬을 이용하여, 3 차원 변환을 정의 translate( x,y ) 2 차원 변환을 정의합니다 translate3d( x,y,z ) 3 차원 변환을 정의합니다 translateX( x ) X 축에 대해서만 값을 사용하여 번역을 정의 translateY( y ) Y 축에 대한 값만을 이용하여 변환을 정의 translateZ( z ) Z 축에 대해서만 값을 사용하여 3D 변환을 정의합니다 scale( x,y ) 스케일 차원 변환을 정의 scale3d( x,y,z ) 3 차원 스케일 변환을 정의합니다 scaleX( x ) X 축에 대한 값을 제공함으로써 스케일 변환을 정의 scaleY( y ) Y 축에 대한 값을 제공함으로써 스케일 변환을 정의 scaleZ( z ) Z 축에 대한 값을 제공함으로써 3 차원 스케일 변환을 정의 rotate( angle ) 차원을 정의 회전 각도는 파라미터에 지정된 rotate3d( x,y,z,angle ) 3 차원 회전을 정의합니다 rotateX( angle ) X 축 따라 3D 회전을 정의 rotateY( angle ) Y 축을 따른 3D 회전을 정의 rotateZ( angle ) Z 축을 따라 3D 회전을 정의 skew( x-angle,y-angle ) X 축과 Y 축을 따라 스큐 2D 변환을 정의 skewX( angle ) x 축을 따라 2 차원 변환을 정의 스큐 skewY( angle ) Y 축에 따라서 2 차원 변환을 정의 스큐 perspective( n ) 3 차원 변형 요소의 사시도를 정의 initial 기본값으로이 속성을 설정합니다. 초기 읽기에 대한 inherit 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기
기술적 세부 사항
기본값: 없음 반환 값 : 요소의 transform 속성을 나타내는 문자열 CSS 버전 CSS3
관련 페이지
CSS 참조 : transform property
<스타일 개체