js rotation


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<style>
        div{
        background: repeating-linear-gradient(45deg,red,yellow 20%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
        Animation-name : the MX ; 
        Animation-DURATION : 6S ; 
        Animation-Timing-function : Linear ; 
        / * animation speed curve * / 
        Animation-Iteration-COUNT : Infinite ; 
        / * animation unlimited Play * / 
        Transition-Property : height ; 
        / * 2B conversion requires the name attribute * / 
        Transition-DURATION : 6S ; 
        / * 2D conversion time * / 
        Transition-Timing-function : Linear ; 
         / * conversion speed profile*/}        
        @keyframes MX
        {
        from{font-size: 0px;color:black;} 
        to{font-size: 80px;color:white;}
        }
        /*#ym:hover{
            animation-play-state:paused;
            停止2d转换
            }*/
</style>
</head>
<body>
<script>
    var x=0;
    var timerid;
    var fx;
    function start(){
        clearInterval(timerid)
        timerid=setInterval(function(){
        if(x==0)
          fx=true
        if(fx==true)
          x=x+1;
        if(x==360)
          fx=false
        if(fx==false)
           x= X - . 1 
        document.getElementById ( " YM " ) .style.transform = ' Rotate ( '  + X +  ' deg) ' ; 
    }, 30 ) 
} 
// the clearInterval () method cancel () function is performed by a timing Sheding De setInterval operating. 
// parameters the clearInterval () method must be the ID value of setInterval () returns. 
// the setInterval () method in the specified period (in milliseconds) to the calling function or calculation expression. 
</ Script > 
<-! The onmouseover = "the clearInterval (timerId)" onmouseout = "Start ()" -> 
< div ID = " >明</div>
<button onclick="start()">开始</button>
<button onclick="clearInterval(timerid)">停止</button>
</body>
</html>

css rotation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0;
        margin: 0;}
        #a{
            width:500px;
            height:500px;
            margin: 300px auto;
            transform: translate(-50%,-50%);
            background: repeating-linear-gradient(60deg,#0ff,#00f,#0f0 10%);
            border-radius:50%;
            /*animation:run 6s linear 5s infinite alternate;*/
            animation-name: run;
            animation-duration:6s;
            animation-timing-function: linear;
            animation-delay:0s;
            Iteration-COUNT-Animation : Infinite ; 
            Animation-direction :  / * Normal | * / Alternate ; 
            
        } 
        #a is: hover { 
            Animation-Play-State : paused ; 
        } 
         P { 
             
             position : Absolute ; 
             Top : 50% ; 
             left : 50% ; 
             Transform : Translate (-50%, - 50%) ; 
             / * using the absolute positioning of the horizontal and vertical center converted 2d * / 
         }
 
        @keyframes run{
            from{
                
                transform:rotate(0deg);font-size: 0px;color:black;
            }
            to{
                transform:rotate(360deg);font-size: 80px;color:white;
            }
        }
 
    </style>
</head>
<body>
    <div id="a"><p>我</P></div>
</body>

Document

JS css rotation and rotation

js rotation

css rotation

Guess you like