💨

【CSS】くるっと順番に表示

に公開

くるっと回転しながら左から右に順番に表示されるコンテンツを実装しました。

https://codepen.io/mdvlzqqm-the-lessful/pen/oNRWVBP

CSSの実装

最初は、
opacity: 0;
transform: rotateY(90deg);
を設定してコンテンツが見えないようにします。
jsで、DOMが読み込まれたらis-activeクラスがつくようにして、
opacity: 1;
transform: rotateY(0);
を設定し、
transition-delayを少しずつずらして設定して順番に表示されるようにします。

Discussion