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秒後に現れます.