CSSでクルクル回す。BLOG日々、思ったことを書いてます。サンプルページCSSでクルクル回す。表と裏の関係を静止した状態ではなく、CSSアニメーションでクルクル回そうかと目論んでいました。Animationのキーフレームアニメーションと呼ばれる物です。@keyframesでアニメーション名をrotateと設定。infinite;という形で渡しています。3sは、3秒という意味。linearイージングと呼ばれるものlinearは開始から終了まで直線的(一定)の動き。infinite繰り返しinfiniteは永続的な繰り返し。表面と裏面を重ねて表示し、表面が裏返ったら非表示にし、裏面を正向きに表示する。裏面が裏返ったら非表示にし、表面を正向きに表示する。hidden;で可能です。rotateY(180deg);で180度反転した状態にしておかなければいけない。hidden;を当てると消えてしまいます。▲7(13)当たり前の結果ですね。180度で非表示な物をCSSの回転アニメーションで表示させるのは不可能だとわかりました。そこでJavaScript(jQuery)を使います。対象のオブジェクトが180度回転、もしくはすでに180度になっていたら非表示にし、正向きになったら表示させるようなプログラムを書きます。▲7(13)requestAnimationFrame()を使います。cssのkeyframesやJavaScriptのsetinterval()では秒指定できますがrequestAnimationFrame()はできません。requestAnimationFrame()はタブが非アクティブな状態などではブラウザがパフォーマンスを落とす仕組みになっており、メモリリークを避けることができます。こちらの使用が推奨されています。Transitionというものもあります。CSS、JavaScriptを使い分けてより良いサイトを作りましょう。最後まで読んでくださりありがとうございました。印刷後、紙を折った...TweetPocketonebitiousDTP歴22年でしたが、2019年よりコーディングの仕事をはじめました。保有資格はDTPエキスパート、クロスメディア・エキスパート、ウェブ解析士、HTML5プロフェッショナルLev.1たまに山登ってます。Stockで写真売ってます。紙面組版をCSSで再現してみる。〜禁則処理〜紙面組版をCSSで再現してみる。〜コラム〜紙面組版をCSSで再現してみる。〜テキストの配置〜iPhone6sを分解、修理した話。Webで文字組みグリッドを再現する話。