English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS3기본 튜토리얼

CSS3 2D 변환

CSS3 2D 변환 기능은 다음과 같이 사용할 수 있습니다:2D 공간에서 변환된 요소

요소의2D 변환

CSS 사용3 2D 변환 기능, 두차원 공간의 요소에 기본 변환 작업을 수행할 수 있습니다. 예를 들어, 이동, 회전, 확대 및 기울기

변환된 요소는 주변 요소에 영향을 미치지 않지만, 절대 위치로 설정된 요소와 마찬가지로 겹쳐질 수 있습니다. 그러나 변환된 요소는 기본 위치(변환되지 않은)에서 여전히 레이아웃에서 공간을 차지

CSS 변환 및 변환 기능 사용

CSS3 transform 속성은 변환 기능을 사용하여 요소가 사용하는 좌표체계를 조작하여 변환 효과를 적용

이 부분에서는 이러한 변환 함수를 설명합니다:

translate() 기능

X와 Y축을 기준으로 요소를 현재 위치에서 새 위치로 이동시킵니다. ty가 지정되지 않으면 기본적으로 0으로 설정됩니다.

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}
테스트를 해보세요‹/›

translate(200px, 50px) 이 기능은 이미지를 x축 정방향으로 수평 이동200 개의 픽셀, y축 정방향으로 이동50픽셀입니다.

　

) 기능

rotate() 기능-rotate() 함수는 요소를 기준점(예: transform

img　{
　　　　-webkit-origin 속성이 지정된) 지정된 각도로 회전합니다. rotate(a)로 작성할 수 있습니다.30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-origin 속성이 지정된) 지정된 각도로 회전합니다. rotate(a)로 작성할 수 있습니다.30deg);　　/*　Firefox　*/
　　　　　　　　-ms-origin 속성이 지정된) 지정된 각도로 회전합니다. rotate(a)로 작성할 수 있습니다.30deg);　　/*　IE　9　*/
　　　　　　　　　　　　origin 속성이 지정된) 지정된 각도로 회전합니다. rotate(a)로 작성할 수 있습니다.30deg);　　　　　　
}
테스트를 해보세요‹/›

transform:　rotate(3rotate(3(0deg) 이 기능은 이미지를 기준점에서 시계 방향으로 회전합니다


0도입니다. 음수 값을 사용하여 반시계 방향으로 회전할 수도 있습니다.

scale() 기능

img　{
　　　　-webkit-scale() 기능은 요소의 크기를 증가하거나 줄일 수 있습니다. scale(sx, sy)로 작성할 수 있습니다. sy가 지정되지 않으면 sx와 같은 값을 가정합니다.1.5transform:　scale(　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-scale() 기능은 요소의 크기를 증가하거나 줄일 수 있습니다. scale(sx, sy)로 작성할 수 있습니다. sy가 지정되지 않으면 sx와 같은 값을 가정합니다.1.5transform:　scale(　　/*　Firefox　*/
　　　　　　　　-ms-scale() 기능은 요소의 크기를 증가하거나 줄일 수 있습니다. scale(sx, sy)로 작성할 수 있습니다. sy가 지정되지 않으면 sx와 같은 값을 가정합니다.1.5transform:　scale(　　/*　IE　9　*/
　　　　　　　　　　　　scale() 기능은 요소의 크기를 증가하거나 줄일 수 있습니다. scale(sx, sy)로 작성할 수 있습니다. sy가 지정되지 않으면 sx와 같은 값을 가정합니다.1.5transform:　scale(　　/*　현대 브라우저　*/　　　　
}
테스트를 해보세요‹/›

);1.5scale(1.5배. scale() 함수는 이미지의 너비와 높이를 원래 크기의 배로 줄일 수 있습니다.1) 또는 scale(1,1) 요소에 대한 영향을 미치지 않습니다.

　

skew() 기능

skew() 함수는 요소를 X와 Y축에 따라 지정된 각도로 기울입니다. skew(ax, ay)로 작성할 수 있습니다. ay가 지정되지 않으면 기본적으로 0으로 가정됩니다.

img　{
　　　　-webkit-transform:　skew(-40deg,　15(deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　skew(-40deg,　15(deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　skew(-40deg,　15(deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　skew(-40deg,　15(deg);　　/*　현대 브라우저　*/　　　　
}
테스트를 해보세요‹/›

함수 skew()-40deg, 15(deg) 요소가 x축에 따라 수평으로 기울어집니다-40도로 y축을 직립시키고15도.

　

matrix() 기능

matrix() 기능2D 변환, 예를 들어 이동, 회전, 축소 및 기울기. 이는 matrix() 기능을 통해 모두 동시에 실행할 수 있습니다.행렬의 여섯 가지 매개변수는 matrix(a, b, c, d, e, f) 형식으로 작성할 수 있습니다. 다음 장에서는 각각을 나타내는 방법을 설명할 것입니다.2D 변환 함수 matrix().

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—tx와 ty는 수평과 수직 이동 값입니다.

  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—a는도수입니다. sin(a)와 cos(a)를 교환할 수 있습니다.-sin(a) 값으로 회전을 반전할 수 있습니다. 수행할 수 있는 최대 회전은360도.

  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);—sx와 sy는 수평과 수직 축소 비율 값입니다.

  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);—ax와 ay는 deg 단위의 수평과 수직 값으로 이루어져 있습니다.

matrix() 기능을 사용하여 실행2D 변환의 예제.

img　{
　　　　-webkit-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　
}
테스트를 해보세요‹/›

다양한 변환을 동시에 실행할 때는 단일 변환 함수를 사용하고 순서대로 나열하는 것이 더 편리합니다. 예를 들어:

img　{
　　　　-webkit-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}
테스트를 해보세요‹/›

2D 변환 기능을 간단히 요약합니다

아래 표는 모든2D 변환 기능

기능설명
translate(tx,ty)X축과 Y축을 따라 요소를 주어진 양만큼 이동합니다
translateX(tx)X축을 따라 요소를 주어진 양만큼 이동합니다
translateY(ty)Y축을 따라 요소를 주어진 양만큼 이동합니다
rotate(a)transform에 따라-origin 속성이 정의되어 있어요. 요소를 원점을 기준으로 주어진 각도로 회전합니다.
scale(sx,sy)주어진 수에 따라 요소의 너비와 높이를 위쪽 또는 아래쪽으로 확대합니다. 이 기능은 scale(1,1)가 유효하지 않습니다
scaleX(sx)주어진 수에 따라 요소의 너비를 위쪽 또는 아래쪽으로 확대합니다
scaleY(sy)주어진 수에 따라 요소의 높이를 위쪽 또는 아래쪽으로 확대합니다
skew(ax,ay)요소가 X축과 Y축을 따라 주어진 각도로 기울입니다
skewX(ax)요소가 X축을 따라 주어진 각도로 기울입니다
skewY(ay)요소가 Y축을 따라 주어진 각도로 기울입니다
matrix(n,n,n,n,n,n)여섯 개의 값을 포함한 변환 행렬 형식으로 지정합니다2D 변환.
CSS3 3D 변환CSS3 그림자(Shadows)