CSS속성 - 전환 & 변환

1. 전환(Transitions)

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

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수 지정(타이밍 함수란?)	ease
transition-delay	전환 효과의 대기시간 설정	0s

 

-1) transition-property

: 전환 효과를 사용할 속성 이름을 설정

값	의미	기본값
all	모든 속성에 적용	all
속성이름	전환 효과를 사용할 속성이름

 

-2) transition-duration

: 전환 효과의 지속시간을 설정 (1s = 1000ms)

값	의미	기본값
시간	전환 효과라 지속되는 시간	0s

 

-3) transition-timing-function

: 타이밍 함수(애니메이션 전환 효과를 계산하는 방법) 지정

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

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

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: 2s steps(3);
}
.box:hover{
  width:300px;
  background:dodgerblue;
}

 

-4) transition-delay

: 전환효과가 몇 초 뒤에 시작할지 대기시간을 설정

값	의미	기본값
시간	전환 효과의 대기시간을 설정	0s

 

---

2. 변환(Transforms) 개요

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

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

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

 

---

3. 변환 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(x-deg)	기울임(x축)	deg
skewY(y-deg)	기울임(y축)	deg
matrix(n,n,n,n,n,n)	2차원 변환 효과	없음

- 이동할 때 사용되는 position 같은 경우에는 애니메이션 효과가 잘 적용되지 않는다. 따라서 traslate을 사용해야함

<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{
  transform: translate(30px,30px) scale(1.5) skew(10deg,5deg);
}

 

 

4. 변환 3D속성

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

 

- perspective는 transform의 맨 앞에 작성해야함

<img src="https://heropy.blog/images/screenshot/html-img-srcset-and-sizes/heropy.png" alt="HEROPHY">

img{
 width: 300px;
 border: 1px solid gray;
 transform: perspective(500px) rotateX(45deg) ;
}

 

---

5. 변환 속성 - transform-origin

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

값	의미	기본값
x축	left, right, center, %, 단위	50%
y축	left, right, center, %, 단위	50%
z축	단위	0

<img src="https://heropy.blog/images/screenshot/html-img-srcset-and-sizes/heropy.png" alt="HEROPHY">

img{
  width: 200px;
  border: 1px solid gray;
  transition: 1s;
  transform: rotate(45deg);
  transform-origin: right 100%;
}

 

 

6. 변환 속성 - transform-style

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

값	의미	기본값
flat	자식 요소의 3D 변환을 사용하지 않음	flat
preserve-3d	자식 요소의 3D 변환을 사용함

- transform-style: preserve-3d는 자식요소에만 사용될 때는 명시하기 때문에 자식의 자식에게 까지 쓸 때는 지속적으로 명시를 해야한다.

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img src="https://heropy.blog/images/screenshot/html-img-srcset-and-sizes/heropy.png" alt="HEROPHY"></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;
}
.parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img{
  width:200px;
  border: 3px solid yellowgreen;
  transition: 1s;
  transform: rotateX(45deg);
}

 

 

7. 변환 속성 - perspective

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

값	의미	기본값
단위	px, em, cm 등 단위로 지정	flat

- perspective 속성과 함수의 차이점

: perspective 속성은 관찰 대상의 부모(조상)요소에 적용하여 하위 요소들을 관찰하는 원근거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정한다.

속성/함수	적용대상	기준점 설정
perspective	관찰 대상의 부모 요소	perspective-origin
transform: perspective()	관찰 대상	transform-origin

 

 

8. 변환 속성 - perspective-origin

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

값	의미	기본값
x축	left, right, center, %, 단위	50%
y축	left, right, center, %, 단위	50%

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img src="https://heropy.blog/images/screenshot/html-img-srcset-and-sizes/heropy.png" alt="HEROPHY"></div>
  </div>
</div>

.perspective{
  width: 200px;
  perspective: 500px;
  perspective-origin: 100% 100%; /*기준점 설정*/
  padding: 70px;
}
.grand-parent{
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}
.parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img{
  width:200px;
  border: 3px solid yellowgreen;
  transition: 1s;
  transform: rotateX(45deg);
}

 

 

9. 변환 속성 - backface-visibility

: 3D 변환으로 회전된 요소의 윗면 숨김을 설정

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

<img src="https://heropy.blog/images/screenshot/html-img-srcset-and-sizes/heropy.png" alt="HEROPHY">

img{
  width: 300px;
  border: 1px solid gray;
  transition: 1s;
  transform: perspective(400px) rotateY(180deg);
  backface-visibility: hidden;
}

 

 

10. 변환 속성 - matrix(a,b,c,d,e,f)

: 요소의 2차원 변환(transforms) 효과를 지정. scale(), skew(), translate(), rotate()를 지정.

: 요소에 일반변환(transform) 함수를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용.(2D 변환 함수는 matrix로, 3D변환 함수는 matrix3d로)

: 일반적인 경우에는 matrix함수가 아닌 일반 변환 함수를 사용