속성을 변환 CSS3
예
회전 div 요소 :
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
»시도
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
정의 및 지침을 속성
2D 변환 속성은 요소 또는 3D 변환에 적용된다. 이 속성은 요소 등, 줌, 이동, 기울기, 회전과 같은 작업을 수행 할 수 있습니다.
더 나은 변환 특성을 이해하기 위해, 볼 온라인 인스턴스를 .
| 기본값 : | 없음 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | .style.transform 개체 = "회전 (7deg)" |
문법
변환 :없음 | 변환 - 기능;
| 값 | 기술 |
|---|---|
| 없음 | 정의 변환하지 않습니다. |
| 행렬 (N, N, N,N, N, N) | 여섯 값의 행렬을 이용하여 2 차원 변환을 정의한다. |
| 을 Matrix3D (N, N, N,N, N, N, N, N, N, N, N, N, N, N, N, N) | 3D 변환 (16) 값의 4x4 행렬을 사용하여 정의 하였다. |
| 변환(X, Y) | 2 차원 변환을 정의합니다. |
| translate3d(X, Y, Z) | 3D 변환을 정의합니다. |
| translateX(X) | 변환의 정의하지만, X 축의 값. |
| translate Y를(Y) | 변환의 정의하지만, Y 축의 값. |
| translateZ(Z) | 3D 변환을 정의하지만, Z 축 값. |
| 스케일 (X [Y]?) | 2D 규모의 변환을 정의합니다. |
| scale3d(X, Y, Z) | 3D 스케일 변환을 정의합니다. |
| scaleX가(X) | X 축 값을 설정하여 스케일 변환을 정의한다. |
| scaleY를(Y) | 는 Y의 값을 설정하여 스케일 변환을 정의하는 축. |
| scaleZ(Z) | Z 축 값을 설정하여 3D 스케일 변환을 정의한다. |
| 회전(각도) | 정의 2D는 인수에 소정 각도 회전. |
| ROTATE3D (X, Y, Z,각도) | 3D 회전을 정의합니다. |
| rotateX(각도) | 3D X는 샤프트를 따라 정의된다. |
| rotateY(각도) | 3D Y 축은 회전에 따라 정의된다. |
| rotateZ(각도) | 차원 Z 축은 회전에 따라 정의된다. |
| 스큐 (X-각도, y 축각도) | 2 차원 X 및 Y 축 기울기의 변화에 따라 정의. |
| skewX(각도) | 2D X 축은 변환의 경사에 따라 정의된다. |
| skewY(각도) | Y 축 스큐 변환 2D 따라 정의. |
| 시각(N) | 3D 변환 소자 사시도를 정의한다. |
더 많은 예제
사진을 회전
이 예는 "폴라로이드"사진을 만들고 사진을 회전하는 방법을 보여줍니다.