From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/transform/index.html | 151 ++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 files/ko/web/css/transform/index.html (limited to 'files/ko/web/css/transform') diff --git a/files/ko/web/css/transform/index.html b/files/ko/web/css/transform/index.html new file mode 100644 index 0000000000..a270b6733b --- /dev/null +++ b/files/ko/web/css/transform/index.html @@ -0,0 +1,151 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - CSS Property + - Reference + - transform +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

+ +
{{EmbedInteractiveExample("pages/css/transform.html")}}
+ + + +

none이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, {{cssxref("position")}}이 fixed거나 absolute인 요소의 컨테이닝 블록으로서 작용합니다.

+ +
+

변형 가능한 요소만 transform할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다.

+
+ +

구문

+ +
/* 키워드 값 */
+transform: none;
+
+/* 함수 값 */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* 다중 함수 값 */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* 전역 값 */
+transform: inherit;
+transform: initial;
+transform: unset;
+ +

transform 속성은 키워드 {{anch("none")}} 또는 하나 이상의 {{anch("<transform-function>")}} 값을 사용해 지정할 수 있습니다.

+ +

값

+ +
+
{{cssxref("<transform-function>")}}
+
요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.
+
none
+
아무런 변형도 적용하지 않음.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

{{cssxref("transform-function/perspective", "perspective()")}}가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.

+ +

예제

+ +

HTML

+ +
<div>Transformed element</div>
+ +

CSS

+ +
div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제", "400", "160")}}

+ +

CSS 변형 사용하기와 {{cssxref("<transform-function>")}} 문서를 방문해 더 많은 예제를 찾아보세요.

+ +

접근성 고려사항

+ +

크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.

+ +

{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 미디어 기능을 사용할 수도 있습니다. 미디어 쿼리와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.

+ +

자세한 내용은 다음 링크에서 확인할 수 있습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.transform")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf