버튼 클릭시 상태값이 변하는 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초뒤에 나타난다.