css 트랜스폼

transform
특정 요소의 크기나 형태 스타일을 바꾸는것

2차원 변형:
-수평/수직 변형
-크기나 각도만 지정하면됨
-2차원 좌표 사용

3차원 변형:
-x축y축에 원근감 추가

-z축은 앞뒤로 이동/ 보는 사람쪽으로 다가올수록 더 커짐

translate 함수

지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴

transform:translate(tx,ty)
x축 방향으로 tx만큼 , y축 방향으로 ty만큼 이동합니다.
tx와 ty 두 가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주합니다.

transform:tranlate3d(tx,ty,tz) x축 방향으로 tx만큼,
y축 방향으로ty만큼 그리고 z축 방향으로(앞뒤) tz만큼 이동

transform:translateX(tx)
x축 방향으로 tx만큼 이동합니다.

transform:translateY
y축 방향으로 ty만큼 이동합니다.

transform:translateZ
z축 방향으로 tz만큼 이동합니다.

예)
.movex:hover{
transform:traslateX(50px);
}

.movey:hover{
transform:traslateY(20px);
}

.movexy:hover{
transform:traslate(10px, 20px);
}

scale 함수

지정한 크기만큼 요소를 확대/축소

transform:sclae(sx,sy)

transform:scale3d(sx,sy,sz)

transform:scaleX(sx)
transform:scaleY(sy)
transform:scaleZ(sz)

예)
.scalex:hover{
transform:scaleX(1.2);
}
.scaley:hover{
transform:scaleY(1.5);
}
.scale:hover{
transform:scale(0.7);
}

rotate 함수

-각도만큼 웹 요소를 시계방향이나 시계반대방향으로 회전
-일반 각도나 래디안 값 사용 (1래디안=1/180)

예)
.rotate1:hover{
transform:rotate(20deg);
}
.rotate2:hover{
transform:rotate(-40deg);
}

skwe 함수

예)
.skwex1{
transform:skweX(30deg);
}
.skwex2{
transform:skweX(-30deg);
}

예)
.skwey:hover{
transform:skewy(12deg);
}
.skwexy:hover{
transform:skewy(30deg , 15deg);
}

transform-origin 속성
특정 지점을 변형의 기준으로 설정

예)
.rose {
transform:rotateZ(10deg);
}
.ltop .rose {
transform-origin:left top;
}
.rtop .rose {
transform-origin:right top;
}
.lbottom .rose{
transform-origin:left bottom;
}
.rbottom .rose{
transform-origin:right bottom;
}

perspective 속성

-원근감을 갖게함
-속성값은 0보다 커야하며 값이 클수록 사용자로부터 멀어짐
perspective: 크기 / none;
예)
.origin{
perspective:20px;
}

perspective-origin 속성
-입체적으로 표현할 요소의 아랫부분(bottom)위치 지정
-좀더 높은곳에서 원근을 조정하는 듯한 느낌을 갖게함.
perspective-origin:<x측 값> / <y측 값>

transform-style 속성

부모 요소에 적용한 3D 변형을 하위 요소에도 적용

transform-style: flat/preserve-3d

예)
.box1{
background:red;
transform:rotateY(45deg);
}

.box2{
background:red;
transform-origin:left top;
transform:rotateX(45deg);
}

#tr-style1{
transform-style:flat;
}
#tr-style2{
transform-style:preserve-3d;
}

backface-visibility 속성

요소의 뒷면, 즉 반대쪽 면을 표시할 것인지 결정

backface-visibility:visible/hidden

-visible 뒷면을 표시합니다
-hidden 뒷면을 표시하지않습니다

*두 개 이상의 변형 동시에 사용하려면
transform 속성에 변형 함수를 나열함
예) 크기를 2배 확대 하면서 x 측 기준으로 180도 회전
tranform: sclae(2) perspective(120px) rotateX(180deg)

예)
.box{
background:yellow;
transform:rotateY(135deg);
}
$back1{ baceface-visibility:hidden; }$back2{
baceface-visibility:visible;
}