예
회전 <div> 요소를 :
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
»그것을 자신을 시도 정의 및 사용
변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면, 요소 등 스큐 규모, 이동, 회전 할 수 있습니다.
더 나은 변환 속성을 이해하기 위해 데모를 보려면 .
| 기본값: | none |
|---|---|
| 상속 : | no |
| 애니메이션 : | yes. Read about animatable Try it |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.transform="rotate(7deg)" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -O- |
| transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- |
통사론
transform: none|transform-functions|initial|inherit;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| 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 ) | 차원 변환을 정의 | |
| translateX( x ) | X 축에 대한 값만을 이용하여 변환을 정의 | »플레이 |
| translateY( y ) | Y 축에 대한 값만을 이용하여 변환을 정의 | »플레이 |
| translateZ( z ) | Z 축에 대한 값만을 이용하여 3 차원 변환을 정의 | |
| scale( x,y ) | 2 차원 스케일 변환을 정의합니다 | »플레이 |
| scale3d( x,y,z ) | 3 차원 스케일 변환을 정의합니다 | |
| scaleX( x ) | X 축에 대한 값을 제공함으로써 스케일 변환을 정의 | »플레이 |
| scaleY( y ) | Y 축에 대한 값을 제공함으로써 스케일 변환을 정의 | »플레이 |
| scaleZ( z ) | Z 축에 대한 값을 제공함으로써 3 차원 스케일 변환을 정의 | |
| rotate( angle ) | 2 차원 회전을 정의, 각도는 매개 변수에 지정된 | »플레이 |
| rotate3d( x,y,z,angle ) | 3 차원 회전을 정의 | |
| rotateX( angle ) | x 축을 따라 3 차원 회전을 정의 | »플레이 |
| rotateY( angle ) | Y 축을 따른 3D 회전을 정의 | »플레이 |
| rotateZ( angle ) | Z 축을 따라 3D 회전을 정의 | »플레이 |
| skew( x-angle,y-angle ) | X 축과 Y 축을 따라 2D 스큐 변환을 정의합니다 | »플레이 |
| skewX( angle ) | X 축 따라 2D 스큐 변환을 정의합니다 | »플레이 |
| skewY( angle ) | Y 축 따라 2D 스큐 변환을 정의합니다 | »플레이 |
| perspective( n ) | 3 차원 변형 요소의 사시도를 정의 | |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
테이블에 던져 이미지
이 예는 만드는 방법을 보여줍니다 "polaroid" 사진을하고 사진을 회전.
관련 페이지
CSS 자습서 : CSS 2D 변환
CSS 자습서 : CSS 3D 변환
HTML DOM 참조 : transform property