JS旋转和css旋转

Posted niuyaomin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS旋转和css旋转相关的知识，希望对你有一定的参考价值。

 

 

 js旋转


<!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: MX;
        animation-duration:6s;
        animation-timing-function:linear;
        /*动画速度曲线*/
        animation-iteration-count:infinite;
        /*动画无限次播放*/
        transition-property: height;
        /*2b转换需要属性的名称*/
        transition-duration: 6s;
        /*2d转换时间*/
        transition-timing-function: linear;
         /*转换速度曲线*/        
        @keyframes MX
        
        fromfont-size: 0px;color:black; 
        tofont-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)

// clearInterval() 方法可取消由 setInterval()函数佘定德定时执行操作。
// clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
// setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
</script>
<!--onmouseover="clearInterval(timerid)" onmouseout="start()"-->
<div id="ym" >明</div>
<button onclick="start()">开始</button>
<button onclick="clearInterval(timerid)">停止</button>
</body>
</html>

 技术图片

 

 

 css旋转

<!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;
            animation-iteration-count:infinite;
            animation-direction: /*normal|*/alternate;
            
        
        #a:hover
            animation-play-state:paused;
        
         p
             
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
             /*利用绝对定位和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旋转的主要内容，如果未能解决你的问题，请参考以下文章

js和css3怎么旋转缩放

css旋转180度怎么转

CSS：在一个元素上缩放和旋转多个 SVG 背景图像 - 没有 JS 可能吗？

图像旋转和 Jcrop.js

css 旋转木马循环香草JS POC

js+css3实现旋转效果