HOME LIB.ARTS HTML/CSS JQUERY ASP.NET ACCESS PYTHON ABOUT

HTML/CSS {Article011}

説明文の表示 ライブデモを見る▶
ようこそ「HTML/CSS」へ...

画像をクリックしたときに回転させてテキストや別の画像と入れ替えるには

ここでは画像をクリックしたときに画像を回転させてテキストや別の画像と入れ替える方法を解説します。 画像を回転させるにはCSSの疑似クラス「:hover」を使う方法もありますが、AppleのiPhoneやiPadなどを使用したときは動作しません。 AppleのiPhone、iPadでもCSSの「:hover」を有効にするには、body要素に「onclick=""」を追加するか、 「:hover」を適用させたいHTML要素に「ontouchmove=""」、「ontouchstart=""」、「ontouchend=""」のいずれかのイベントを追加する方法があります。 しかし、いずれの方法も完璧には動作しないのでここではjQueryのクリック時のイベントを使用しています。

作成手順

  1. VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article011.aspx」を作成します。

  2. Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加したら以下のCSSを入力します。 画像をクリックしたときは「div.flip-box-inner」要素にCSSのクラス「.flip-box-inner-open」を追加します。 これで画像が回転して入れ替わります。 再度画像をクリックしたときはCSSのクラス「.flip-box-inner-open」を削除して「.flip-box-inner-close」を追加します。 これで画像が回転して元の画像に戻ります。 
    <style>
    .flip-box {
        background-color: transparent;
        width: 300px;
        height: 200px;
        border: 1px solid #f1f1f1;
        perspective: 1000px;
    }

    .flip-box-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    .flip-box-inner-open {
        transform: rotateY(180deg);
    }

    .flip-box-inner-close {
        transform: rotateY(0deg);
    }

    .flip-box-front, .flip-box-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .flip-box-front {
        background-color: #bbb;
        color: black;
    }

    .flip-box-back {
        background-color: #555;
        color: white;
        transform: rotateY(180deg);
    }
</style>
  3. Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを追加します。 さらに、SCRIPTタグを追加したら以下のjQueryのコードを入力します。 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script type="text/javascript">
    // jQuery Document Ready Event...
    $(function () { 
        // Flip image with text or another image  
        $('div.flip-box').click(function () {
            var flipbox = $(this).find('div.flip-box-inner');
            if ($(flipbox).hasClass('flip-box-inner-open')) {
                $(flipbox).removeClass('flip-box-inner-open').addClass('flip-box-inner-close');
            }
            else {
                $(flipbox).removeClass('flip-box-inner-close').addClass('flip-box-inner-open');
            }
        });      
    });
</script>
  4. <body>...</body>要素内に以下のようなHTMLを配置します。 行2-12では、行5で指定した画像(haba.jpg)を回転させて行8-9のテキストと入れ替えます。 行15-24では行18で指定した画像(hana2.jpg)を行21の画像(hana3.jpg)と入れ替えます。 
    <h5>画像を回転させてテキストと入れ替える</h5>
<div id="flip1" class="flip-box">
    <div class="flip-box-inner">
        <div class="flip-box-front">
            <img src="../hana.jpg" alt="Flower" style="width:300px;height:200px"  /> 
        </div>
        <div class="flip-box-back">
            <h2>Flower</h2>
            <p>My favorite flower</p>
        </div>
    </div>
</div>

<h5>画像を回転させて別の画像と入れ替える</h5>
<div id="flip2" class="flip-box">
    <div class="flip-box-inner">
        <div class="flip-box-front">
            <img src="../hana2.jpg" alt="Flower" style="width:300px;height:200px"  /> 
        </div>
        <div class="flip-box-back">
            <img src="../hana3.jpg" alt="Flower" style="width:300px;height:200px"  /> 
        </div>
    </div>
</div>

操作手順と解説

  1. サンプルが表示されたら、上の画像をクリックして見てください。

  2. 画像がフリップ(回転)してテキストと入れ替わります。 この状態で再度画像をクリックすると元の画像に戻ります。

  3. 次に、下の画像をクリックして見てください。

  4. 画像が回転して別の画像と入れ替わります。 この状態で再度画像をクリックすると元の画像に戻ります。

Live DEMO

画像を回転させてテキストと入れ替える
Flower

Flower

My favorite flower

画像を回転させて別の画像と入れ替える
Flower
Flower
Go Top