[CSS] 전환&변환

 

transition(전환) : CSS 속성의 전환 효과를 지정

시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션. 단축속성.

바뀌기 전 상태에 지정

 

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수 지정	ease
transition-delay	전환 효과가 몇 초 뒤에 시작할 지 대기시간 설정	0s

*타이밍 함수: 전환효과의 여러가지 애니메이션? *1s=1000ms

*단축속성 작성 시 duration delay 순으로 입력해야함

 

일반적으로 property와 duration 개별속성을 합친 transition 단축속성을 많이 사용한다

 

 

transition-timing-function : 타이밍 함수(애니메이션 전환 효과를 계산) 지정

 

값	의미	기본값	Cubic Bezier 값
ease	빠르게-느리게	ease	cubic-bezier(.25,.1,.25,1)
linear	일정하게		cubic-bezier(0,0,1,1)
ease-in	느리게-빠르게		cubic-bezier(.42,0,1,1)
ease-out	빠르게-느리게		cubic-bezier(0,0,.58,1)
ease-in-out	느리게-빠르게-느리게		cubic-bezier(.42,0,.58,1)
cubic-bezier(n,n,,n,n)	자신만의 값을 정의(0~1)
steps(n)	n번 분할된 애니메이션

 

예제

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: 1s linear;
/*   transition: width 1s, background 1s; */
/*   transition-property: width,background;
  transition-duration: 1s; */
/*   transition-timing-funtion: linear; */
}
.box:hover{
  width: 300px;
  background: dodgerblue;
}

 

 

Easing Functions Cheat Sheet 사이트 참고

https://easings.net/

Easing Functions Cheat Sheet

 

 

transform(변형) : 요소의 변환 효과를 지정

 

사용법

transform: 변환함수1 변환함수2 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;

.box{
    transform: rotate(20deg) translate(10px, 0);
}

 

 

transform 2D 변환 함수 : 이동,크기,회전,기울임

 

값(변환함수)	의미	단위
translate(x,y)	이동(X축,Y축)	단위
translateX(x)	이동(X축)	단위
translateY(y)	이동(Y축)	단위
scale(x,y)	크기(X축,Y축)	없음(배수)
scaleX(x)	크기(X축)	없음(배수)
scaleY(y)	크기(Y축)	없음(배수)
rotate(degree)	회전(각도)	deg
skew(x-deg,y-deg)	기울임(X축,Y축)	deg
skewX(y-deg)	기울임(X축)	deg
skewY(y-deg)	기울임(Y축)	deg
matrix(n,n,n,n,n,n)	2차원 변환 효과	없음

 

matrix를 직접적으로 사용할 일은 거의 없다.

 

* position은 요소를 배치하고 끝낼 때 사용, translate 함수의 경우 요소가 언제든지 이동할 수 있어야 할 때 사용

 

 

rotate 함수

 

 

position과 translate 함수 차이점 예제

<div class="box">123</div>

.box{
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;

}
.box:hover{
  position: relative;
  left: 30px;
  top: 30px;
}

position의 경우 transition 속성을 넣어도 자연스럽게 애니메이션 효과가 나오지 않음

position: relative;
left: 0;
top: 0;

 

물론 이렇게 이전상태(.box)에 초기화를 직접적으로 설정하면 되기는 함. 그러나 매번 설정하는것도 비효율 적이고, position은 배치하고 끝내는 개념이기 때문에 애니메이션에 특화되어있지 않으므로 부화가 많이 일어난다. (이런 요소들이 쌓이면 나중에 웹사이트가 버벅일 수 있다)

 

 

최적화해서 애니메이션을 적용하려면 transition 속성을 사용.

.box{
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;

}
.box:hover{
  transform: translate(30px, 30px);
}

 

 

함수 2개 예제

.box{
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}
.box:hover{
  transform: translate(20px,10px) skewY(20deg);
}

 

마우스 올리기 전

마우스 올렸을 때

 

transform 3D 변환 함수

 

값(변환함수)	의미	단위
translate3d(x,y,z)	이동(X축,Y축,Z축)	단위
translateZ(z)	이동(Z축)	단위
scale3d(x,y,z)	크기(X축,Y축,Z축)	없음(배수)
scaleZ(z)	크기(Z축)	없음(배수)
rotate3s(x,y,z,a)	회전(X벡터,Y벡터,Z벡터,각도)	없음, deg
rotateX(x)	회전(X축)	deg
rotateY(y)	회전(Y축)	deg
rotateZ(z)	회전(Z축)	deg
perspective(n)	원근법(거리)	deg
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3차원 변환 효과	없음

*z축은 우리의 눈과 방향이 같으므로 화면 상에서는 안 보일 수 있다

 

*perspective함수에 특정한 거리값을 입력함으로써 3d함수들에 원근감을 불어넣을 수 있다. persepctive함수는 transform에서 가장 앞에 선언되어야 한다.

 

 

예제

 

 

transform 변환 속성

 

속성	의미
transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정(기본적으로는 허용되지 않음)
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

 

 

[transform 속성]

transform-origin : 요소 변환의 기준점을 설정

 

값	의미	기본값
X축	left,right,center,%,단위	50%
Y축	top,bottom,center,%,단위	50%
Z축	단위	0

 

중심축(기준점) 디폴트값은 정가운데이다.

 

transform-origin: 50% 50%; /*정가운데*/
transform-origin: 0% 0%; /*좌측 상단*/
transform-origin: 100% 100%; /*우측 하단*/

 

 

[transform 속성]

transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

 

값	의미	기본값
flat	자식 요소의 3D 변환 사용 X	flat
preserve-3d	자식 요소의 3D 변환 사용 O

 

자식요소에만 설정이 되므로 후손으로 내려갈 때마다 계속 입력해야함

 

 

예제 

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img src="https://cdn.wallpapersafari.com/47/75/i8cgUE.jpg" alt="prism" alt="prism">
    </div>
  </div>
</div>

.perspective{
  width: 200px;/*보는시점 너비 똑같이설정해서 요소의 중심에서 시점설정.(뷰포트의 중심에서 보는게 디폴트)중요*/
  perspective: 500px;
  padding: 70px;
}
.grand-parent{
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;/*자식요소에서도 3d 효과 사용*/
}
.parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img{
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

 

 

 

[transform 속성]

perspective : 하위 요소를 관찰하는 원근 거리를 설정

 

px,em,cm등 단위로 지정. 관찰하고자 하는 요소의 상위 요소에 설정해야함

 

 

 

*perspective 속성과 함수의 차이점

 

값	의미	기본값
perspective	관찰 대상의 부모 요소	perspective-origin
transform: perspective()	관찰 대상	transform-origin

 

=> perspective 속성은 관찰대상이 여러개 라서 부모요소에 적용하여 하위요소들을 관찰하고,

transform: perspective() 변환 함수는 관찰 대상이 하나 라서 직접 적용하여 그 대상을 관찰

 

 

 

 

[transform 속성]

perspective-origin : 원근 거리의 기준점을 설정

 

값	의미	기본값
X축	left,right,center,%,단위	50%
Y축	top,bottom,center,%,단위	50%

디폴트 값: perspective 속성을 적용한 요소의 정중앙

 

     → x축

↓    

y축

 

 

 

[transform 속성]

backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김을 설정

 

값	의미	기본값
visible	뒷면 숨기지 않음	visible
hidden	뒷면 숨김

 

 

 

 

 

[transform 속성]

martrix(a,b,c,d,e,f) : 요소의 2차원 변환(transforms) 효과를 지정

scale(), skew(), translate(), rotate()를 지정

 

요소에 일반변환 함수를 사용하면 브라우저에 으해 matrix 함수로 계산되어 적용된다.

따라서 일반적인 경우에는 matrix 함수보단 일반 변환 함수를 사용하면 된다