＊＊＊＊＊　現在、編集中です　＊＊＊＊＊

 

事例ー１　２つの画像入れ替えてY軸回転、裏面でテキスト表示

１．ボックスの中に２つの画像を挿入し、ボックスと画像にクラスを設定。
　　クラス名は任意です、この事例に添った名前で説明

１）ボックス名：img_anima_nc3_logo_front_back"

２）画像のクラス名：挿入すると多くのクラスや設定が表示されるが、気にしないでクラス名の先頭に「任意のクラス名」を入れる。（２，３行目）

ＮＣ３ロゴ訪問感謝

ご訪問 感謝 !

 

事例ー２　画像のY軸回転

テーマ設定はデフォルトなので、カスタマイズ・メニューの「ＣＳＳ追加と置換」を参照してください。

ステップ１：画像を挿入する。

ステップ２：画像にクラスを付ける（タグ編集）。
ここでは、class="nc3_logo" 　です。

ステップ３：デフォルトテーマの style.css に以下を追記する。
（サーバーのファイル・マネージャー）。

.nc3_logo {
  display: inline-block;
  animation: nc3_w205 6s linear infinite;}
@keyframes nc3_w205 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
/* ３行目 nc3_w205 は任意名、@keyframes で使う。
          6s は６秒で回転 */