画像入替・Ｙ軸（横）回転

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

2020-1-7 修正

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

１）ボックス名：img_anima_nc3_logo_front_back"

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

ＨＴＭＬ（アニメーション本体）ＨＴＭＬ部分を分かり易く修正（2020-1-7）

　尚、下部に記述のチェック・ボックス設置も修正しています。

  <div class="img_anima_nc3_logo_front_back">
    <div class="img_anima_nc3_logo_back">
      <img title="*" src="url" alt="*" 以降・略 />
      <p style="position: absolute; top: 5px; left: 7px;
          font-size: 1.25em; color: blue;">★</p>
    </div>
    
    <div class="img_anima_nc3_logo_front">
      <img title="*" src="url" alt="*"  以降・略 />
      <p style="position: absolute; top: 260px;
         text-align: center; font-size: 1.75em;
         font-weight: bold; color: blue;
         width: 100%;">ご訪問&nbsp;感謝 !
      </p>
    </div>
  </div>
ＮＣ３ロゴ

★

訪問感謝

ご訪問 感謝 !

 

ＣＳＳ（アニメーション本体）

.img_anima_nc3_logo_front_back {
  width:205px;
  height:295px;
  animation: img_anima_nc3_logo_front_back 8s linear infinite;
  transform-style: preserve-3d;
  animation-delay: 1.5s;
/*  animation-iteration-count: 5; */
}
@keyframes img_anima_nc3_logo_front_back {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.img_anima_nc3_logo_front, .img_anima_nc3_logo_back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.img_anima_nc3_logo_front {
  transform: rotateY(180deg);
}
.img_anima_nc3_logo_front_back:hover {
  animation-play-state: paused;
}

チェック・ボックスで 停止・開始の設定方法

　任意のクラス名でボックスを作成し、その中にアニメーション本体のＨＴＭＬを挿入

ＨＴＭＬ記述

<section class="kn_anima_box" style="float: right;
                width: 210px; text-align: center;">
  <label for="toggle">停止・再開;&nbsp;</label>
  <input id="toggle" type="checkbox" />
<-- この位置にアニメーション本体のＨＴＭＬを入れる -- >
</sectionv>

ＣＳＳ記述

.kn_anima_box input:checked+div{
  animation-play-state: paused;
}

重要事項

※　チェック・ボックスの位置は、画像の下に配置出来ません。

※　ＨＴＭＬの「label」 タグが消える問題が出ます。ＮＣ３をインストールした状態で、パブリックで作成したページでは、このタグは入りません。「JavaScript有効化」の設定で以下の方法で、解消出来ます。

JavaScript有効化