transform: none; 이 기본값이다.
propery -> transform (transform 하나의 속성만 갖는다)
하나 이상의 CSS 변형 함수에 인자를 전달해서 값을 할당한다.
변형 함수는 오른쪽부터 적용한다.
.box {
transform: scale(0.5) translate(-100%, -100%);
}
scale() 함수에 0.5 값을 전달
translate() 함수에 (-100%, -100%)를 전달.
✏️ 크기 조절 - scale
scale(arg);
arg 안에 (0 ~ 1) 사이의 숫자가 들어가고 전체 크기 비율을 조절한다.
scale(arg, arg);
arg (0 ~ 1) 사이의 숫자가 들어가고 각각 가로와 세로 비율을 조절한다.
scaleX(arg);
arg (0 ~ 1) 사이의 숫자가 들어가고 폭의 크기만 조절한다.
scaleY(arg);
arg (0 ~ 1) 사이의 숫자가 들어가고 높이 크기만 조절한다.
단순 크기를 줄이는 것과 차이가 있어 아래 예시를 통해 확인해보자.
width: 400px;
#bolt {
transform: scale(0.5)
}
위와 같이 이미지 사이즈를 반으로 줄일 경우 크기만 반으로 줄이는 것과 다른 효과를 발생.
scale(0.5)의 경우 img가 담긴 크기를 영역을 보존하고 그 안에 다시 이미지를 반으로 줄여
해당 영역에 넣어주는 효과를 발생.
✏️ 회전 - rotate
rotate(<angle>)
인자로 <angle> 자료형을 받는다.
인자의 단위로 (deg, grad, rad, turn)이 있다.
단위별 크기의 대소비교는 다음과 같다.
90deg = 100grad = 0.25turn ≈ 1.5708rad
-90deg = -100grad = -0.25turn ≈ -1.5708rad
✏️ 이동 - translate
transform: translate(arg);
인자로 하나의 값만 넣을 경우 scale과 다르게 x축 방향으로의 이동만 관장한다.
transform: translate(arg, arg);
x축 방향으로의 이동, y축 방향으로의 이동을 관장한다.
transform: translateX(arg);
x축으로만 이동한다.
transform: translateX(arg);
y축으로만 이동한다.
arg
<length>, <percentage> 모두 사용 가능
<length> -> px em rem vw vh
<percentage> -> (0 ~ 100)%
퍼센트를 사용 할 경우 width와 height가 기준이 되어 산정된다.
#bolt {
width: 300px;
transform: translate();
}
✏️ 기울임 - skew
기울임을 관장한다.
x축으로 기울어 질 경우 지정된 영역의 (0, 1/2*height)를 기점으로 기울임이 발생한다.
y축으로 기울어 질 경우 지정된 영역의 (1/2*width, 0)를 기점으로 기울임이 발생한다.
아래와 같이 사용한다.
skew(ax);
x축으로만 움직인다.
skew(ax, ay);
x축과 y축이 움직인다.
skewX(ax, ay);
x축만 움직인다.
skewY(ax, ay);
y축만 움직인다.
기준점을 변경할 때 사용하는 속성이다.
transfor-origin 자체가 속성이다.
transform-origin: center; 가 기본값이다. 초기좌표는 (50%, 50%)이다.
ex_1
#bolt {
width: 300px;
margin: 100px;
transform: scale(1.3);
transform-origin: 50px 100px;
}
ex_2
transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;
✍️ CSS transition
✏️ transition (전환) 개요
⌛ 시간 차를 두고 A상태에서 B상태로 변화를 표현하는 속성에 대해 알아보기로 하자
✏️ transition-property, transition-duration (1부)
transition-property
transition-property: none; 이 기본값이다.
어떤 속성의 상태를 변화시킬 것인지를 관장한다.
transition-duration: <time>;
상태 변화의 시간을 관장한다.
자료형 <time>에는 's'와 'ms'가 있다.
✏️ transition-property, transition-duration (2부)
transition-property: all;
transition-duration: 2s;
위 코드는 바뀌기 전 tag에 적용시켜야 한다.
위의 코드는 'A'에서 'B'상태로 변환할 때 모든 속성에 duration을 주겠다는 의미이다.
위 코드를 적지 않아도 'A'에서 'B'상태로의 변환이 일어난다.
다만 시간 조정을 통제할 수 없다는 점이 특징이다.
✏️ transition-delay, transition-timing-function
transition-delay
해당 속성은 'A'에서 'B'로 변화할 때 언제 변화를 시작할지를 정하는 기능을 관장한다.
transition-timing-function
'A'에서 'B'로 변화할 때 변화 속도에 variation을 주는 기능을 관장한다.
transition-timing-function: ease;
✏️ transition (shorthand)
단축 속성의 default 값은 아래와 같다.
작성시 주의사항으로 시간의 경우 순서에 영향을 받고 나머지 요소는 그렇지 않다.
그러나 작성시 (property, duration, timing-function, delay) 순으로 방법을
지켜서 작성하는 것을 권장한다.
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
작성방법
시간이 하나만 적힐 때 -> duration을 의미한다.
시간이 두개가 적힐 때 -> duration, delay를 의미한다.
ex_
아래 한줄과 개행 이후로의 4줄이 서로 같은 효과를 만든다.
transition: all 3s ease-in-out 1s;
transition-property: all;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
