CSSで文字などをクルッと回転させるやり方
ポートフォリオサイトを作成中、ホバー時に文字をクルッと回転させる動作を実装したので、備忘的に投稿させて頂きます。
※javascriptは使用しておらずcssのみで実装しています。
実際方法
実装方法といっても、とてもシンプルです。
例として、回転させたい方向で３通り記載しております。
X軸起点 ＝ 鉄棒で前回りするイメージ
Y軸起点 ＝ フィギュアスケートでのスピンのイメージ
Z軸起点 ＝ 側転するイメージ
example.html
<ul><ahref="#"class="example-X">X軸起点</a><ahref="#"class="example-Y">Y軸起点</a><ahref="#"class="example-Z">Z軸起点</a></ul>example.css
ula{text-decoration:none;display:inline-block;color:black;font-size:30px;}.example-X{transition:1s;transform:rotateX(0deg);}.example-X:hover{transform:rotateX(360deg);}.example-Y{transition:1s;transform:rotateY(0deg);}.example-Y:hover{transform:rotateY(360deg);}.example-Z{transition:1s;transform:rotateZ(0deg);}.example-Z:hover{transform:rotateZ(360deg);}大事なのは、transform: rotateX( 360deg ) この記述です。
このように記述する事で、ホバー時に、360度=１回転します。
また、transition: 1s の値を大きくすればゆっくり回転し、小さくすれば速く回転しますので、
お好みで調整してください。
少しでも、皆様の参考になれば幸いです。
閲覧頂きありがとうございました！