使用 Javascript 在 CSS3 中触发翻转动画

Triggering a flip animation in CSS3 with Javascript

本文关键字：翻转 动画 Javascript CSS3 使用      更新时间：2023-09-26

我试图通过单击按钮使网格中的框翻转。使用纯CSS3，我可以使动画使用悬停。我的JavaScript根本不起作用。我的目标是通过使用调用 javascript 中的函数的按钮单击来触发此 CSS 动画。感谢您提供的任何帮助。这是我的代码：

<html>
<head>
<meta charset="utf-8">
<title>Sudoku Grid Attempt</title>
<style type="text/css">
    #sudoku{
        position:relative;
        top:150px;
        left:150px;
        background-color:#666699;
        height:800px;
        width:800px;
        font-family:Lucida Console monospace;
        size:1px;
    }
    .grid{
        position:relative;
        top:65px;
        left:65px;
        width:42px;
        height:42px;
        float:left;
    }
    .square{
        text-align:center;
        height:2.6em;
        width:2.6em;
    }
    .square>.front{
        position:absolute;
        height:2.6em;
        width:2.6em;
        border-style:solid;
        border-width:3px;
        border-color:black;
     background-color:#ff6600;
    transform:perspective(600px) rotateY(0deg);
    backface-visibility:hidden;
    transition:transform .5s linear 0s;
    }
    .square>.back{
        position:absolute;
        height:2.6em;
        width:2.6em;
        border-style:solid;
        border-width:3px;
        border-color:black;
     background-color:#ff0066;
    transform:perspective(600px) rotateY(180deg);
    backface-visibility:hidden;
    transition:transform .5s linear 0s;
    }
    /*.square:hover>.front{
        transform:perspective(600px) rotateY(-180deg);
    }*/
    /*.square:hover>.back{
        transform:perspective(600px) rotateY(0deg);
    }*/
    .frontSide{
        transform:perspective(600px) rotateY(-180deg);
    }
    .backSide{
        transform:perspective(600px) rotateY(0deg);
    }
    .button{
        height:70px;
        width:90px;
        border-radius:70px 70px 70px 70px;
        border-color:#ff3300;
        background-color:#ff3300;
        position:relative;
        top:600px;
        left:-300px;
    }
</style>
<script>
    document.getElementsByClassName("button").addEventListener("click",flipSide,false);
    function flipSide(){
        var elem = document.getElementsByClassName("square");
        var elemF = document.getElementsByClassName("front");
        var elemB = document.getElementsByClassName("back");
        var efs = document.getElementsByClassName("frontSide");
        var ebs = document.getElementsByClassName("backSide");
        elem.elemF += "efs";
        elem.elemB += "ebs";
    }
</script>
</head>
<body>
<div id="sudoku">
    <div class="grid">
        <div class="square">
            <div class="front">1</div>
            <div class="back">2</div>
        </div>
        <div class="square">
            <div class="front">3</div>
            <div class="back">4</div>
        </div>
        <div class="square">
            <div class="front">5</div>
            <div class="back">6</div>
        </div>
        <div class="square">
            <div class="front">7</div>
            <div class="back">8</div>
        </div>
        <div class="square">
            <div class="front">9</div>
            <div class="back">10</div>
        </div>
        <div class="square">
            <div class="front">11</div>
            <div class="back">12</div>
        </div>
        <div class="square">
            <div class="front">13</div>
            <div class="back">14</div>
        </div>
        <div class="square">
            <div class="front">15</div>
            <div class="back">16</div>
        </div>
        <div class="square">
            <div class="front">17</div>
            <div class="back">18</div>
        </div>
    </div>
    <div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
    <div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
    <div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
    <div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
<div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
<div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
<div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
<div class="grid">
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="square">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
<button class="button">Solution</button>
</div>
</body>
</html>

既然你说这段代码在纯 CSS 中工作，只使用 :hover ，我只会使用纯 Javascript 来编辑元素的 CSS 来完成翻转。

代码应如下所示：

var k = 0;
function flip() {
    var j = document.getElementById("card");
    k += 180;
    j.style.transform = "rotatey(" + k + "deg)";
    j.style.transitionDuration = "0.5s"
}

这很简单，因为它只是使用 Javascript 来编辑元素的 CSS 属性。没有别的。

您还可以将.square:hover > .front更改为#image:active > .front以达到相同的效果。

看看这个JSFiddle。

如果要使用 getElementsByClassName 方法，则必须获取指定的元素索引 0，如下例所示。更改此部分后，您将不会收到该错误消息。

var button = document.getElementsByClassName("button")[0];
    if(button != null)
        button.addEventListener("click",flipSide,false);

取而代之的是，最好使用 getElementById 方法。

我建议你看看jQuery。 jQuery与jQueryRotate一起，它有一个rotate方法和一个animateTo属性，这可能是你需要的。 这里有一个简单的脚本来说明，当你点击图像时，它会旋转 180 度，当你双击它时，它会返回到原来的位置：

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - demo</title>
      <style type='text/css'>
        #image{ margin:30px 30px; }
      </style>
      <script type='text/javascript' src='js/jquery-latest.js'></script>
      <script type="text/javascript" src="js/jQueryRotate.js"></script>
      <script type='text/javascript'> 
      $(window).load(function(){
      $("#image").rotate({ 
           bind: 
          { 
            click : function() { 
                $(this).rotate({animateTo:180})
            },
          dblclick : function() { 
                $(this).rotate({animateTo:0})
            }
          }
      });
      });  
    </script>
    </head>
   <body>
    <div align="center"><img src="images/wizard.gif" id="image"></div>
    </body>
    </html>

下面是一个工作示例：http://jsfiddle.net/j7gfwfc3/3/

相关文章：