如何使用JavaScript來回旋轉圖像

Question

我正在嘗試創建一個網站，並且希望在網站上將面孔旋轉到某個點，然后以相反的方向旋轉回去，直到某個點，如果他們可以永遠做下去，我希望這樣做，但我只能這樣做永遠做一個完整的輪換，有人知道如何解決這個問題嗎？

這是我的HTML代碼：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSDC</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script>    
        var looper;
        var degrees = 0;
        function rotateAnimation(el,speed){
            var elem = document.getElementById(el);
            if(navigator.userAgent.match("Chrome")){
                elem.style.WebkitTransform = "rotate("+degrees+"deg)";
            } else if(navigator.userAgent.match("Firefox")){
                elem.style.MozTransform = "rotate("+degrees+"deg)";
            } else if(navigator.userAgent.match("MSIE")){
                elem.style.msTransform = "rotate("+degrees+"deg)";
            } else if(navigator.userAgent.match("Opera")){
                elem.style.OTransform = "rotate("+degrees+"deg)";
            } else {
                elem.style.transform = "rotate("+degrees+"deg)";
            }
            looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
            degrees++;
            if(degrees > 359){
                degrees = 1;
            }
            document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
        }
    </script>
</head>
<body>
    <img id="Dave" src="Images/Dave.png"/>
    <script>rotateAnimation("Dave",30);</script>
    <img id="Andy" src="Images/Andy.png" />
    <script>rotateAnimation("Andy",30);</script>
    <img id="Dan" src="Images/Dan.png" />
    <script>rotateAnimation("Dan",30);</script>
    <img id="Nico" src="Images/Nico.png" />
    <script>rotateAnimation("Nico",30);</script>
</body>
</html>

這是我的CSS代碼

body {
    font-family: Arial, sans-serif;
    background-image: url("Images/BSDC.png");
    background-repeat: no-repeat;
}
#Dave {
    position: absolute;
    margin-left: 3%;
    margin-top: 3%;
}
#Andy {
    margin-left: 3%;
    margin-top: 35%;
    position: absolute;
}
#Dan {
    margin-left: 85%;
    margin-top: 3%;
    position: absolute;
}
#Nico {
    margin-left: 85%;
    margin-top: 35%;
    position: absolute;
}

Answer 1

您可以使用CSS動畫來完成所有這些工作。 看看這個jsFiddle

瀏覽器的前綴很煩人……如果有人知道是否可以簡化，請發表評論。 但這是概念，您可以在元素上設置動畫：

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

然后定義動畫，就可以進行任何屬性更改，並在其中進行盡可能多的步驟，我只是使用了基本值（0、25、50 100）

@keyframes NAME-YOUR-ANIMATION {
  0%   { transform: rotate(0deg); }
  25% { transform: rotate(45deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

您可以在MDN上閱讀此內容

如何使用JavaScript來回旋轉圖像

問題描述

1 個解決方案

解決方案1
5 已采納 2015-06-16 23:52:28

如何使用JavaScript來回旋轉圖像

問題描述

1 個解決方案

解決方案1 5 已采納 2015-06-16 23:52:28

解決方案1
5 已采納 2015-06-16 23:52:28