20191028110940.jpg
20191028111001.jpg

代码实例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://blog.fqidc.cn/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8">             </script>

    <style type="text/css">
        *{
            margin: 0;
        } 
        .box1{
            width: 200px;
            height: 600px;
            background-color: palevioletred;
            transform:rotate(700000000000000000000deg);
            transition: 600s;
            border-radius: 50%;
        }
        .box2{
            width: 200px;
            height: 600px;
            background-color: greenyellow;
            transform:rotate(-700000000000000000000deg);
            transition: 600s;
        }
    </style>
</head>
<body>
    <div class="box" style="float: left; width: 520px; height: 520px; border: 2px solid saddlebrown;">
        
    </div>
    <div class="box" style="float: left; width: 520px; height: 520px; border: 2px solid saddlebrown;">
        
    </div>
    <div class="box" style="float: left; width: 520px; height: 520px; border: 2px solid saddlebrown;">
        
    </div>        
    <br /><br /><br />
    <div id="div"><span>你好，交20块钱</span></div><br />
    <input type="text" value="你好  我是文本框" /><br /><br />
    <button id="html">html</button>
    <button id="text">获取  改变文本</button>
    <button id="value">改变value值</button>
    
    <br /><br />
    <button id="but">点击旋转1</button>
    <button id="but2">点击旋转2</button>
    <script type="text/javascript">
        $("#html").click(function(){
        $("#div").html("<b>你好，交20块钱</b>");
        });
        $("#text").click(function(){
            $("#div").text("立马去交");
        });
        $("#value").click(function(){
            $(":text").val("你好我是密码框");
        });
        
        
        
        $("#but").click(function(){
            $(".box").toggleClass("box1");
        });
        $("#but2").click(function(){
            $(".box2").toggleClass("box1");
        });
        $("#but2").click(function(){
            $(".box").toggleClass("box2");
        });
    
    </script>
</body>