transform

영어 [trænsˈfɔ:m] 미국 [trænsˈfɔ:rm]

vt.Transform; 변경, 변경

vi.Change

n.[숫자] 변환

CSS 변환 속성 통사론

Role: transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 변환 속성을 더 잘 이해하려면 이 데모를 확인하세요.

구문: ​​transform: none|transform-functions

설명: none은 변환을 정의하지 않습니다. 행렬(n,n,n,n,n,n)은 6개 값의 행렬을 사용하여 2D 변환을 정의합니다. Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)은 16개 값의 4x4 행렬을 사용하여 3D 변환을 정의합니다. translate(x,y)는 2D 변환을 정의합니다. translate3d(x,y,z)는 3D 변환을 정의합니다. translateX(x)는 X축 값만 사용하여 변환을 정의합니다. translateY(y)는 Y축 값만 사용하여 변환을 정의합니다. translateZ(z)는 Z축 값만 사용하여 3D 변환을 정의합니다. scale(x,y)는 2D 스케일링 변환을 정의합니다. scale3d(x,y,z)는 3D 스케일링 변환을 정의합니다. scaleX(x) X축 값을 설정하여 크기 조정 변환을 정의합니다. scaleY(y)는 Y축 값을 설정하여 크기 조정 변환을 정의합니다. scaleZ(z) Z축 값을 설정하여 3D 스케일링 변환을 정의합니다. 회전(각도) 매개변수에 각도를 지정하여 2D 회전을 정의합니다. Rotate3d(x,y,z,angle) 은 3D 회전을 정의합니다. rotateX(angle)은 X축을 따라 3D 회전을 정의합니다. RotateY(angle)은 Y축을 따라 3D 회전을 정의합니다. RotateZ(angle)은 Z축을 따라 3D 회전을 정의합니다. Skew(x-angle,y-angle)는 X축과 Y축을 따라 2D 기울이기 변환을 정의합니다. SkewX(angle)는 X축을 따라 2D 기울이기 변환을 정의합니다. SkewY(angle)는 Y축을 따라 2D 기울이기 변환을 정의합니다. spective(n) 3D 변환 요소의 투시도를 정의합니다.​

참고: Internet Explorer 10, Firefox 및 Opera는 변환 속성을 지원합니다. Internet Explorer 9에서는 대체 -ms-transform 속성(2D 변환에만 해당)을 지원합니다. Safari 및 Chrome은 대체 -webkit-transform 속성(3D 및 2D 변환)을 지원합니다. Opera는 2D 변환만 지원합니다.

CSS 변환 속성 예

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요