Transform
- 변형속성은 박스요소의 모양을 변형시키는 속성으로 x,y축을 이용하는 2차원 변형속성과 x,y,z축을 이용하는 3차원 변형속성으로 나눠진다.
- z축은 모니터로부터 사용자쪽으로 가까워질수록 양수이며, 멀어질수록 음수값을 쓰는 입체축이다.
2차원 변형함수
- 태그의 모양을 변형시킬때 2차원 변형함수나 3차원 변형함수를 이용한다.
- 함수들은 transform의 속성값으로 사용되고 ()사이에 올바른 값을 넣어주면 된다.
- 2차원 변형함수는 x축과 y축을 이용하여 태그의 모양을 변현시킨다.
-translate(x,y) : 특정 크기만큼 x축과 y축으로 이동시킨다. 단위는 px이나 %,vw,vh단위를 쓴다.
- translateX(x축) : 특정 크기만큼 x축으로 이동시킨다.
- translateY(y축) : 특정 크기만큼 y축으로 이동시킨다.
- scale(x,y) : 특정 크기만큼 확대 및 축소시킨다. 이때 단위없이 배수를 쓴다.
1.2 = 120% 1이 100%이며 만약 1.2라고 쓰면 120% 크게 태그가 늘어난다.
확대되거나 축소될때 박스의 중앙을 기준으로 확대/축소되며 안에 들어있는
컨텐츠(글자나 이미지)도 함께 확대/축소된다.
- scaleX(배수) : 특정 크기만큼 x축으로 확대시킨다.(넓이)
- scaleY(배수) : 특정 크기만큼 y축으로 확대시킨다.(높이)
- skew(x, y) : 특정 각도만큼 비튼다. 사다리꼴처럼 비틀어서 변형시킨다.
각도의 단위는 deg으로 표현하고, top위치가 0도이며 시계방향으로 돌아가면서 적용된다.
- skewX(각도deg) : 특정 크기만큼 x축으로 비튼다.
- skewY(각도deg) : 특정 크기만큼 y축으로 비튼다.
- rotate(angle z) : 특정 각도만큼 회전한다. 마찬가지로 단위는 deg을 사용한다.
3차원 변형함수
- 3차원 변형함수는 x,y,z축을 이용하여 태그의 모양을 변형시킨다.
입체효과를 만들때 주로 사용한다.- translate3d(x,y,z) : 특정 크기만큼 이동시킨다.
- translateX(x축)
- translateY(y축)
- translateZ(z축)
- scale3d(x,y,z) : 특정 크기만큼 확대/축소시킨다.
- scaleX(x축)
- scaleY(y축)
- scaleZ(z축)
- rortate3d(x,y,z) : 특정 각도만큼 회전시킨다.(=x,y,z방향성,deg각도)
지정한 각도만큼 시계방향(deg)이나 반시계방향(-deg)으로
회전을 시키는데, 이때 x,y,z축의 방향성을 조정할 수 있다.
- rortateX(x축)
- rortateY(y축)
- rortateZ(z축)
transform-origin
-
transform-origin은 중심축을 변환하는 속성으로 transform으로 태그가 변형되는
기본 중심축은 박스의 가로 세로 중앙이다. -
이때 중심축을 옮기고 싶다면 transform-origin을 사용할 수 있다.
-
transform-origin은 x축,y축,z축을 각각 지점을 지정하여 축을 옮길 수 있고
단위는 px이나 %나 정해진 키워드를 사용하여 옮길 수 있다.[기본형]
transform-origin : x축 y축 z축
- x축 : px, %(백분율), left, center, right
- y축 : px, %(백분율), top, center, bottom
- z축 : px, %처럼 길이값만 사용가능하다.transform-style
-
transform3d를 이용해서 3차원 변형을 했을때 해당 속성을 적용하기 전까지는 입체가 아닌 평면으로 보인다.
-
preserve-3d값을 사용하면 3d처럼 입체적으로 보이게 만들 수 있다.
Transition
- 사용자가 태그위에 마우스를 올리거나 클릭했을때 바뀌는 모양을 부드럽게 움직이며
풀어주는 모션효과를 만드는 속성
transition의 하위 속성들[transition으로 변환시킬수 있는 속성들]
- 위치속성(position의 좌표들) : left, right, bottom, top
- 크기속성 : width,height
- 박스속성 : padding, margin
- 테두리속성 : border-width, border-color, border-radius
- 색상속성 : color, background-color
- 투명도 : opacity, rgba
- 변형속성 : transform - transition의 모션을 섬세하고 컨트롤할때 아래 속성들을 함께 사용할 수 있다.
- transition : transition의 하위 속성들을 한꺼번에 선언할 때 사용한다.
공백으로 구분하여 여러 속성을 한 번에 선언한다.
- transition-duration : "~초 동안"이라는 뜻으로, 모션효과를 몇 초동안 적용할지
정한다. 초 단위는 s로 표기한다.
- transition-delay : "~초 기다렸다가"라는 뜻으로 모션효과가 바로 적용되지 않고
선언된 초 동안 기다렸다가 모션을 진행한다. 지연시간을 말하면 초단위인 s를 사용한다.
- transition-property : 태그에 적용된 어러 속정중에 일부만 transition효과를 주고싶을때 사용한다.
즉, 어떤 속성을 트랜지션 시킬것인지 정하는 속성이다. 속성값으로는 변형시키고자하는
속성의 이름을 쓴다. 속성끼리는 ,로 구분한다.
- transition-timing-function : 정해진 키워드에 따라 모션 속도를 조절한다. 가속도와 같은 의미이다.
쓸 수 있는 속성값은 아래와 같다.
- linear : 처음부터 끝까지 일정한 속도로 움직인다.
- ease : 가속도. 처음에는 천천히 시작했다가 점점 빨라지면서 마지막에는 천천히 끝내는 값. 기본값이다.
- ease-in : 천천히 시작한다.
- ease-out : 천천히 끝난다.
- ease-in-out : 천천히 시작했다가 천천히 끝낸다.
- transition : transition의 하위 속성들을 한꺼번에 선언할 때 사용한다.
