재산 출처 변환 CSS3
예
세트 포인트 위치 회전 요소 :
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
»시도
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
属性 | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
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-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
정의 및 지침을 속성
변환 - 원산지 속성을 사용하면 변환 소자의 위치를 변경할 수 있습니다.
2D 변환 소자는 X와 Y 축 요소를 변경할 수있다. 3D 변환 소자는 또한 Z 축 요소를 변경할 수있다.
더 나은 변환 - 원산지 속성을 이해하기 위해, 참조하시기 바랍니다 데모를 .
참고 :이 속성은 첫 번째해야 변환 속성을.
팁 : 사파리 / 크롬 사용자 : 더 나은 3D 속성을 변환 이해하기 위해, 참조하시기 바랍니다 데모를 .
기본값 : | 50 % 50 % 0 |
---|---|
상속 : | 아니 |
버전 : | CSS3 |
자바 스크립트 구문 : | 오브젝트 .style.transformOrigin = "20 % 40 %" |
문법
transform-origin:x-axis y-axis z-axis;
값 | 기술 |
---|---|
X 축 | 사용자 정의보기는 여기서 X 축에 배치됩니다. 가능한 값 :
|
Y 축 | 사용자 정의보기는 여기서 Y 축에 배치됩니다. 가능한 값 :
|
Z 축 | 사용자 정의보기는 여기서 Z 축에 배치됩니다. 가능한 값 :
|