文字を回転させる

ポートフォリオ制作時にキャッチコピーが複数あるけど絞れない、伝えたいことがいっぱいある。

文字を回転させながら入れ替えて全部表示してしまおう

もう少し簡単にCSSだけでつくってみました

まずはrotateについて

transform:rotate()で回転
                                rotateX(deg) : x軸を中心に回転
                                rotateY(deg) : y軸を中心に回転
                                rotateZ(deg) : z軸を中心に回転
で回転軸を指定
                                1回転させるanimationをinfiniteで繰り返すとずっと回っている状態になります。                            

transform-originで回転の原点を指定奥行きに原点をとることで立体的に回転します
                                transform-origin(初期原点からのx軸の距離,y軸距離,z軸距離)
                                transform-styleとperspectiveでより3Dっぽく見えます。
                                （これは難しいので別の機会に）                            

                                原点からz軸方向に距離をとってx軸で回転させます。
                                animationでrotateとopacityで前面は濃くく背面は薄く表示します。
                                animation-delayで少しずつずらします。
                                これにposition:abusoluteをかけるとずべての文字が重なりきれいに回転しているように見えます。
                                ページトップのテキストは親要素自体もrotateとanimationをつけてます。

                                今度は一つのアニメーションの中で表示部分(0~20%)と非表示部分(20%~100%)にわけてdelayをかけると順番表示ができるようになります。                                 わかりやすいようにopacity0.1にしていますがこれを0に変えてposition:absoluteをかけるときれいに表示されます。