如何转换堆叠的div。在JavaScript中_Javascript_Html_Css

如何转换堆叠的div。在JavaScript中

javascript html css

如何转换堆叠的div。在JavaScript中,javascript,html,css,Javascript,Html,Css,我正在尝试使用html5、CSS3和JS制作“记忆游戏”。我已经完成了这个游戏的视图和模型部分，现在正在尝试制作控制器。我想要的是调用一个函数，即JS中的flip，并希望该函数执行转换，而不是使用CSS3的悬停效果。基本上，我是在尝试遵循这个方法。我检查了在css3中使用鼠标悬停翻转的情况，如下面的sass代码所示，但是对于游戏，用户决定单击哪里。为了简单起见，我在html5中简化了代码，因为它在所有其他div中重复 <!DOCTYPE html> <html lang="en

我正在尝试使用html5、CSS3和JS制作“记忆游戏”。我已经完成了这个游戏的视图和模型部分，现在正在尝试制作控制器。我想要的是调用一个函数，即JS中的flip，并希望该函数执行转换，而不是使用CSS3的悬停效果。基本上，我是在尝试遵循这个方法。我检查了在css3中使用鼠标悬停翻转的情况，如下面的sass代码所示，但是对于游戏，用户决定单击哪里。为了简单起见，我在html5中简化了代码，因为它在所有其他div中重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I Don't Know</title>
    <link rel="stylesheet" href="trapStyle.css">

</head>
<body>
   <div  class = "container" >

    <div class="sub1" >
    <div class="front" id="card1"  onclick="flip(card1)">card1</div>
    <div class="back" id="card1_1">what the hell?</div>
    </div>   <--sub1 Ends-->

    <div class="sub1">
    <div class="front" id="card2" onclick="flip(this)">card2</div>
    <div class="back" id="card2_2">what the hell?
    </div>   <--sub1 Ends-->

    </div>  <-- container Ends -->


    <script src ="script.js"></script>
</body>
</html>

和JavaScript

function flip(front) {

    document.getElementById("front").style.transition = opacity 0.5s linear 0s;
    document.getElementById("front").style.opacity = 0;

}

注意：上面的链接试图将id传递给发生转换的JS函数。这里也做了同样的事情，只是为了从用户那里获取输入，而不是仅仅停留，但什么也没发生！我在编辑器中复制/粘贴链接代码，并执行平滑转换，但当它来自我的代码时，什么都没有！您能告诉我我的缺陷在哪里吗？

将CSS从悬停状态更改为类，以便进行持续更改。sub1:悬停到。悬停：

 .container .hovered > .front {
    transform: perspective(600px) rotateY(-180deg); }
  .container .hovered > .back {
    transform: perspective(600px) rotateY(0deg); }

现在，单击后，将该类添加到单击的元素：

$(".sub1").click(function() {
   $(this).addClass ('hovered');   
})

javascript中的这个函数是

function change(element) {
    element.className = element.className + " hovered";
}

前提是在函数调用中发送元素

onclick="change(this)"

将CSS从.sub1:hover更改为.hover。然后，将JS中的类名“hovered”添加到您想要在html中推荐的元素是@vals，我不知道该怎么做。[这里]（）是我的JSFIDLE，如果您能为我这样做，我将不胜感激！我这样做了，但什么也没发生：（你检查过小提琴吗？哦，对不起@vals，我没有检查！它工作得很好！非常感谢！它在JSFIDLE中工作，但在这里不工作！我想知道你是否可以用JS而不是jQuery提供相同的解决方案？添加了javaScript示例

onclick="change(this)"