JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります（変形の応用）。参考までに具体的な内容は以下のとおりです。

コードを添付してください:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>変換の応用</title>
    <スタイル タイプ="text/css">
        ＃箱{
            幅: 50px;
            高さ: 50px;
            背景色: 赤;
            /*平行移動、変位、回転、回転振幅、スケール、拡大、傾斜、傾き*/
            /*変換: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
        }
    </スタイル>
</head>
<本文>
    <button id="btn">変形</button>
    <div id="box"></div>
    <スクリプト>
        window.onload = 関数 (){
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            var インデックス = 0;
            btn.onclick = 関数 (){
                インデックス++;
                box.style.transform = `translate(${index*100}px,${index*50}px) rotate(${index*10}deg) scale(${index*1.3})`;
            }
        }
    </スクリプト>
</本文>
</html>

実装効果図:

デフォルトでは:

変換をクリックした後:

変更を続行するにはもう一度クリックします。

以下は、変換の応用を時計の動きに拡張したものです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>デジタル時計ケース</title>
    <スタイル タイプ="text/css">
        *{
            パディング: 0;
            マージン: 0;
        }
        ＃クロック{
            幅: 600ピクセル;
            高さ: 600px;
            背景: url("img/clock.jpg") 繰り返しなし;
            位置: 相対的;
        }
        #時間、#分、#秒
            位置: 絶対;
            幅: 30ピクセル;
            高さ: 600px;
            左: 50%;
            左マージン: -15px;
        }
        ＃時間{
            背景: url("img/hour.png") 繰り返しなし;
        }
        ＃分{
            背景: url("img/minute.png") 繰り返しなし;
        }
        ＃2番{
            背景: url("img/second.png") 繰り返しなし;
        }
    </スタイル>
</head>
<本文>
    <div id="時計">
        <div id="時間"></div>
        <div id="分"></div>
        <div id="2番目"></div>
    </div>
    <script type="text/javascript">
        // 1. タグを取得します。 var hour = document.getElementById("hour");
        var 分 = document.getElementById("分");
        var second = document.getElementById("second");

        // 2. タイマーを開始して現在の時刻を取得します setInterval(function (){
            // 2.1 現在のタイムスタンプを取得する var now = new Date();
            // 2.2 時間、分、秒を取得する var s = now.getSeconds();
            var m = now.getMinutes() + s/60;
            var h = now.getHours()%12 + m/60;

            // 2.3 回転 second.style.transform = `rotate(${s*6}deg)`;
            minute.style.transform = `rotate(${m*6}deg)`;
            hour.style.transform = `rotate(${h*30}deg)`;
        },10)
    </スクリプト>
</本文>
</html>

エフェクト画像を添付します（現在 8:01 です）: