Progress step

버튼 클릭시 상태값이 변하는 Progress Step

✔️ 체크

:root {
  --line-border-fill: #3498bd;
  --line-border-empty: #e0e0e0;
}

.progress {
  background-color: var(--line-border-fill);
  border: solid 1px var(--line-border-fill);
}

---

transform속성으로 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있다.

transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

---

.progress {
  ...
  transition: 0.4s ease;
}

0.4초뒤에 나타난다.