JavaScript implements click to change the image shape (transform application)

JavaScript clicks to change the shape of the picture (application of transform), for your reference, the specific content is as follows

Attach the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Application of transform</title>
    <style type="text/css">
        #box{
            width: 50px;
            height: 50px;
            background-color: red;
            /*traslate displacement rotate rotation amplitude scale magnification skew tilt*/
            /*transform: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
        }
    </style>
</head>
<body>
    <button id="btn">Deform</button>
    <div id="box"></div>
    <script>
        window.onload = function (){
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            var index = 0;
            btn.onclick = function (){
                index++;
                box.style.transform = `translate(${index*100}px,${index*50}px) rotate(${index*10}deg) scale(${index*1.3})`;
            }
        }
    </script>
</body>
</html>

Implementation effect diagram:

By default:

After clicking Transform:

Click again to continue changing.

The following is an extension of the application of transform to the movement of the clock:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Digital Clock Case</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url("img/clock.jpg") no-repeat;
            position: relative;
        }
        #hour,#minute,#second
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            margin-left: -15px;
        }
        #hour{
            background: url("img/hour.png") no-repeat;
        }
        #minute{
            background: url("img/minute.png") no-repeat;
        }
        #second{
            background: url("img/second.png") no-repeat;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1. Get the tag var hour = document.getElementById("hour");
        var minute = document.getElementById("minute");
        var second = document.getElementById("second");

        // 2. Start the timer to get the current time setInterval(function (){
            // 2.1 Get the current timestamp var now = new Date();
            // 2.2 Get hours, minutes, seconds var s = now.getSeconds();
            var m = now.getMinutes() + s/60;
            var h = now.getHours()%12 + m/60;

            // 2.3 Rotation second.style.transform = `rotate(${s*6}deg)`;
            minute.style.transform = `rotate(${m*6}deg)`;
            hour.style.transform = `rotate(${h*30}deg)`;
        },10)
    </script>
</body>
</html>

Attached is the effect picture (it is now 8:01):

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js realizes that the image area can be clicked and the size can be changed at will (applicable to mobile terminals) code example
Vue.js click the toggle button to change the content of the example
js implements the method of changing the page background image by clicking on the image

<<: Detailed tutorial on installing Docker on CentOS 7.5

>>: Master-slave synchronization configuration and read-write separation of MySQL database