CSS3 변환
CSS3의 변환, 당신은 번역 할 수 있도록 회전, 크기 조절 및 요소를 왜곡.
변환은 원소 변화 형상, 크기 및 위치에 있도록하는 효과가있다.
CSS3는 2D 및 3D 변환을 지원합니다.
마우스는 2D와 3D 변환의 차이를 보려면 아래의 요소 :
2D 변환에 대한 브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
다음 숫자 -ms-, -webkit-, -moz- , 또는 -o- specify 접두사와 함께 작업 한 첫 번째 버전.
| 재산 | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D 변환
이 장에서는 다음과 같은 2D 변환 방법에 대해 배우게됩니다 :
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | 팁 : 다음 장에서 3D 변환에 대해 배우게됩니다. |
|---|
translate() 메소드
translate() 메소드 (X 축 및 Y 축에 주어진 파라미터에 따라) 현재의 위치에서 요소를 이동시킨다.
다음은 이동 <div> 현재 위치에서 아래로 요소를 오른쪽으로 50 픽셀, 100 픽셀 :
예
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
»그것을 자신을 시도 rotate() 메소드
rotate() 메소드는 소정의 정도에 따라 소자를 시계 방향 또는 시계 반대 방향으로 회전한다.
다음은 회전 <div> 20도를 가진 요소를 시계 방향으로 :
예
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
»그것을 자신을 시도 음수 값을 사용하면 요소를 시계 반대 방향으로 회전합니다.
다음은 회전 <div> 20도를 가진 요소를 시계 반대 방향 :
예
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
»그것을 자신을 시도 scale() 메소드
scale() 메소드 증가하거나 (폭과 높이에 주어진 매개 변수에 따라) 요소의 크기를 감소시킨다.
다음의 예는 증가 <div> 원래의 폭의 두 배, 원래 높이의 세 배로 소자 :
예
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
»그것을 자신을 시도 다음은 감소 <div> 원래 너비와 높이의 절반을 할 요소를 :
예
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
»그것을 자신을 시도 skewX() 메소드
skewX() 메소드는 지정된 각도로 X 축을 따라 요소를 기울입니다.
다음은 기울어 <div> 요소에게 X 축을 따라 20도를 :
예
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
»그것을 자신을 시도 skewY() 메소드
skewY() 메소드는 주어진 각도에 의해 Y 축을 따라 요소를 기울입니다.
다음은 기울어 <div> 요소에게 Y 축을 따라 20도를 :
예
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
»그것을 자신을 시도 skew() 메소드
skew() 메소드는 지정된 각도로 X와 Y 축을 따라 요소를 기울입니다.
다음은 기울어 <div> 엘리먼트에게 X 축을 따라 20도, 및 Y 축을 따라 10도 :
예
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
»그것을 자신을 시도 두번째 매개 변수가 지정되지 않은 경우 0의 값을 갖는다. 그래서, 다음은 기울어 <div> 엘리먼트에게 X 축을 따라 20도 :
예
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
»그것을 자신을 시도 matrix() 메소드
matrix() 메소드는 모든 2D 하나로 방법을 변형 결합합니다.
matrix() 메서드는 수학이 회전 할 수 있도록 기능, 규모, 이동 (번역)을 포함, 여섯 매개 변수를 사용하고, 요소를 왜곡.
매개 변수는 다음과 같습니다 : matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
예
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
»그것을 자신을 시도 연습으로 자신을 테스트!
속성을 변환 CSS3
다음 표는 모든 2D 속성을 변환 :
| 재산 | 기술 |
|---|---|
| transform | 요소에 2D 또는 3D 변환을 적용 |
| transform-origin | 당신은 변환 요소의 위치를 변경할 수 있습니다 |
방법을 변환 2D
| 기능 | 기술 |
|---|---|
| matrix(n,n,n,n,n,n) | 여섯 값의 행렬을 이용하여 2 차원 변환을 정의 |
| translate(x,y) | X 축과 Y 축을 따라 이동 부재, 2 차원 변환을 정의 |
| translateX(n) | x 축을 따라 이동 부재, 2 차원 변환을 정의 |
| translateY(n) | Y 축을 따라 이동 부재, 2 차원 변환을 정의 |
| scale(x,y) | 요소가 폭 및 높이 변화 차원 스케일 변환을 정의 |
| scaleX(n) | 요소의 폭을 변경, 2 차원 스케일 변환을 정의합니다 |
| scaleY(n) | 요소의 높이를 변경, 2 차원 스케일 변환을 정의합니다 |
| rotate(angle) | 2 차원 회전을 정의, 각도는 매개 변수에 지정된 |
| skew(x-angle,y-angle) | X 축과 Y 축을 따라 2D 스큐 변환을 정의합니다 |
| skewX(angle) | X 축 따라 2D 스큐 변환을 정의합니다 |
| skewY(angle) | Y 축 따라 2D 스큐 변환을 정의합니다 |