📌transform - 2차원변형함수
2차원 변형함수는 x축과 y축을 이용하여 태그의 모양을 변형시킨다.
함수들은 transform의 속성값으로 사용되고 ()사이에 올바른 값을 넣어주면 된다.
📍 - translate(x,y)
: 특정 크기만큼 x축과 y축으로 이동시킨다.
단위는 px이나 %,vw,vh단위를 쓴다
- translateX(x축)
: 특정 크기만큼 x축으로 이동시킨다. - translateY(y축)
: 특정 크기만큼 y축으로 이동시킨다.
📍- scale(x,y)
: 박스의 중앙을 기준으로 배수만큼 축소,확대되며 안에 들어있는 컨텐츠(글자,이미지)도 함께 확대/축소된다.
-
scaleX(배수)
: 특정 크기만큼 x축으로 확대시킨다.(넓이) -
scaleY(배수)
: 특정 크기만큼 y축으로 확대시킨다.(높이)
📍- skew(x,y)
: 특정 각도만큼 비튼다. 사다리꼴처럼 비틀어 변형시킨다.
각도의 단위는 deg으로 표현하고 , top위치가 0도이며 시계방향으로 돌아가면서 적용시킨다.
-
skewX(각도deg)
: 특정 크기만큼 x축으로 비튼다. -
skewY(각도deg)
: 특정 크기만큼 y축으로 비튼다.
📍-rotate(angleZ)
: 특정 각도만큼 회전한다. 마찬가지로 단위는 deg을 사용한다.
📌transform-origin
중심축을 변환하는 속성으로 x축, y축, z축을 각각 지점을 지정하여
축을 옮길 수 있고 단위는 px나 %나 정해진 키워드를 사용하여 옮길 수 있다.
[기본형]
transform-origin : x축 y축 z축;
-x축 : px, %(백분율), left, center, right
-y축 : px, %(백분율), top, center, bottom
-z축 : px, %처럼 길이값만 사용가능하다.transform: rotate(10deg);
transform-origin: 100% 100%;
/* 전체 크기의 x축(가로)로 100%라 맨오른쪽으로 가고 y축 100%라
맨 밑으로 가서 오른쪽 밑에 모서리가 중심축이 된다. */
📌3차원 변형함수
3차원 변형함수는 x,y,z축을 이용하여 태그의 모양을
변형시킨다. 입체효과를 만들때 주로 사용한다.
-
translate3d(x,y,z)
: 특정 크기만큼 이동시킨다. -
translate(x축)
-
translate(y축)
-
translate(z축)
-
scale3d(x,y,z)
: 특정 크기만큼 축소/확대시킨다. -
scale(x축)
-
scale(y축)
-
scale(z축)
-
rotate3d(x,y,z)
: 특정 각도만큼 회전시킨다.
rotate변형 함수의 3차원 변형 형태는 조금 다르다.
지정한 각도만큼 시계방향(deg)이나 반시계방향(-deg)
으로 회전을 시키는데, 이때 x,y,z축의 방향성을 조정할 수 있다. -
rotate(x축)
-
rotate(y축)
-
rotate(z축)
.translated {
transform: translate3d(100px, 100px, 500px);
}
.scaled {
opacity: 80%;
transform: scale3d(1.2, 1.2, 5);
}
.rotated {
transform: rotate3d(2, 3, 4, 45deg);
transform3d를 이용해서 3차원 변형을 했을 때 preserve-3d값을 사용하면 3d처럼 입체적으로 보이게 만들수 있다.
📌transition
마우스를 올리거나 클릭했을때 바뀌는 모양을 부드럽게 모션효과를 만드는 속성.
[transition으로 변화시킬수 있는 속성들]
- 위치속성(position) : left, right, bottom, top
- 크기속성 : width,height
- 박스속성 : padding,margin
- 테두리속성 : border-width, border-color, border-radius
- 색상속성 : color, background-color
- 투명도 : opacity,rgba
- 변형속성 : transform[transition의 하위 속성들]
트렌지션의 모션을 섬세하게 컨트롤할때 함께 사용가능
✔1. transition : 하위 속성들을 한꺼번에 공백으로 구분하여 선언
✔2. transition-duration (~초 동안)
: "~초 동안"이라는 뜻, 모션효과를 몇초동안 적용할지 정한다.
초 단위는 s로 표기한다.
✔3. transition-delay (~초 기다렸다가)
: 모션효과 시작전 지연시간을 말하며 초단위인 s를 사용
✔4. transition-property
: 어떤 속성을 transition 시킬것인지 정하는 속성이다.
속성값으로는 변형시키고자하는 속성의 이름을 쓴다. 속성끼리 ,(콤마)로 구분한다.
✔5. transition-timing-function
: 정해진 키워드에 따라 모션 속도를 조정한다.
- liner🌞 : 처음부터 끝까지 일정한 속도로 움직인다.
- ease🌞 : 처음에는 천천히 시작했다가 점점 빨라지면서 마지막에는 천천히 끝내는 값. 기본값
- ease-in : 천천히 시작한다.
- ease-out : 천천히 끝난다.
- ease-in-out : 천천히 시작했다가 천천히 끝난다.