transform변형속성
브라우저 화면의 x,y,z축을 이용해 태그의 모양을 바꿔주는 속성.
x축과 y축을 사용하는 변형속성을 2차원 화면 좌표라고 부르고 여기에 z축이 추가되면
3차원 화면 좌표라고 부른다. z축은 브라우저를 보는 유저에게 가까울수록 양수값이다.
2차원 변형 함수
프로그래밍 언어에서 식별자(속성값) 뒤에 괄호가 있을 때 해당 식별자를
'함수'라고 하며, rotate(60deg)같은 경우 괄호 부분을 '변환함수'라고 부른다.
[종류(속성값)]
1.translate(x,y)
특정 크기만큼 이동시켜주는 속성
위의 이미지는 translateX값을 이동시킨 모습이다.
예시)
-translateX(값) : 특정 크기만큼 x축으로 이동함.
-translateX(200px)) : 200px 크기만큼 x축으로 이동함.
-translatey(200px)) : 200px 크기만큼 y축으로 이동함.
2.scale(x,y)
박스의 중심을 기준으로 특정 크기만큼 축소/확대하는 속성
위의 이미지는 scale을 통해 2배 확대한 모습이다. 위와 같이 태그의 중심으로부터 커지거나 작아진다. 값에는 배율을 나타내며, 1배수 2배수 0.5배와 같이 단위는 배율을 사용한다.여기서 1은 100%를 의미한다.
*스케일은 박스안에 들어가는 글씨나 사진 등 콘텐츠에도 영향을 미치기때문에 고려해서 배수를 변경해줘야한다.
-scaleX(값) : 특정 크기만큼 x축으로 축소/확대됨.
-scaleY(값) : 특정 크기만큼 y축으로 축소/확대됨.
3.skew(x,y)
특정 각도만큼 기울이는 속성
위의 이미지와 같이 특정 방향으로 기울어지게 만들 수 있다. 개발자도구를 할용하면 쉽게 조절할 수 있다.
-skewX(값) : 특정 각도만큼 X축으로 기울임.
-skewy(값) : 특정 각도만큼 y축으로 기울임.
4.rotate(z)
특정 각도만큼 회전시키는 속성
단위에는 deg, grad, rad, turn 이 있다.
--> rotate() 함수에는 숫자+단위 의 변수를 사용한다.
*🔍양수는 시계방향, 음수는 반시계방향으로 회전시킨다.
3차원 변형 속성 translate3D
x,y,z축을 이용해 입체 효과를 만들 수 있다.
하지만 해당 속성을 적용한다고 해서 바로 입체적으로 보이는 것은 아니며 입체 효과 속성을 추가해야만 해당 태그를 입체적으로 볼 수 있다.
[종류]
1. translate3d(x,y,z):특정 크기만큼 이동한다.
-translateX
-translateY
-translateZ :z축으로 특정 크기만큼 이동함.
그러나 실제 z축의 크기가 변해도 외관상으로는 변함이 없다.
- scale3d(x,y,z) : 특정 크기만큼 축소/확대함.
-scaleX
-scaleY
-scaleZ - lotate3d(x,y,z, 각도) : 특정 각도만큼 회전함.
-lotateX: x축만큼의 방향성을 갖는다.
-lotateY y축만큼의 방향성을 갖는다.
-lotateZ z축만큼의 방향성을 갖는다.
위의 이미지처럼 z축의 변화는 눈으로 보여지지 않는다.
transform-origin : 중심축 변형 속성
transform이 적용된 박스의 중심축을 이동시킬 때 사용하는 속성.
기본값은 박스의 중앙이며, 값을 3개로 나눠서 사용할 수 있음.
[기본형]
transform-origin:x축 y축 z축;
[속성값]
-x축 : 백분율(%),left,center,right중에서 지정할 수있다.
-y축 : 백분율(%),top,center,bottom중에서 지정할 수있다.
-z축 : z축은 길이값만 사용 가능함. (px,%)
기본값은 박스 중앙에 설정되어 있지만 중심축의 위치를 바꾸고싶을 때 transform-origin을 사용한다.
예를들어 박스의 x축을 왼쪽으로 y축을 위쪽으로 표시하면 왼쪽위의 꼭지점을 중심으로 사용할 수있다. 사용할 때는 한가지값으로도 사용가능.
예시)
transform-origin:left,top;3d속성은 입체 효과 속성을 추가해야만 해당 태그를 입체적으로 볼 수 있는데 아래와 같은
속성을 추가하면 입체적으로 보여진다.
애니메이션 정육면체 만들기
섹션안에 div박스를 만들어 준뒤에 너비와 높이를 지정 후에 위와 같이 트랜스폼을 활용하여 면을 변형시켜준다.
*transform-style을 통해 z축을 3D로 인식시켜준다.
animation 속성을 활용하면 영역을 360도 회전시킬 수있는데
아래와 같이 키프레임 속성을 입력해주면 시작방향과 끝방향을 설정하여 정육면체를 돌릴 수있다.
