Javascript 尝试在用户单击a div时设置其动画。_Javascript_Css

Javascript 尝试在用户单击a div时设置其动画。

javascript css

Javascript 尝试在用户单击a div时设置其动画。,javascript,css,Javascript,Css,我是一个初学者程序员，试图创建我的第一个结合html、css和javascript的项目。我已经研究这个话题好几个小时了，我想找到一个有效的解决方案和解释。我有一个html和一个相应的java和css文件。我正在尝试创建一个记忆游戏。我试图在用户单击时翻转卡片。我读过各种各样的解决方案，但没有一个是我可以直接应用的。我正在寻找一个纯javascript/css解决方案。提前谢谢 <!DOCTYPE html> <html lang="en"> <head>

我是一个初学者程序员，试图创建我的第一个结合html、css和javascript的项目。我已经研究这个话题好几个小时了，我想找到一个有效的解决方案和解释。我有一个html和一个相应的java和css文件。我正在尝试创建一个记忆游戏。我试图在用户单击时翻转卡片。我读过各种各样的解决方案，但没有一个是我可以直接应用的。我正在寻找一个纯javascript/css解决方案。提前谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"> <!--making a link to the css stylesheet-->
    <script src="scripts.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>Matching Game</title>
</head>
<body>
    <div class = "title"><h1>Matching Game</h1></div>
    <div class = "infobar">
        <span>
            __stars__
        </span>
        <span>
            __move__
        </span>
        <span>
            __timer__
        </span>
        <span>
            __restart__
        </span>
    </div>
    <div class = "gameboard">
        <div class = "cardrows">
            <div class = "flip1">
                <div id = "card1" class = "card, off" onclick="flip(this.id)">
                    <div class = "cardback">
                        2
                    </div>
                    <div class = "cardfront ">
                        1
                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

爪哇：

如果你只是想把牌翻过来，那你就差一点了

我刚刚添加了这两种css样式

transition: 1.0s;
transform-style: preserve-3d;

转到

.on

和

.off

类（他们需要知道动画运行多长时间！）

功能翻转（el）{
log（“翻转调用”）；
var elem=document.getElementById（el）；
控制台日志（elem）；
elem.className=“on”；
控制台日志（elem）；
}

*{
-webkit框大小：边框框；
/*为确保兼容性和正确调整方框大小，只需几行代码*/
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
背景色：rgb（228227225）；
}
.头衔{
文本对齐：居中；
颜色：黑色；
}
.游戏板{
宽度：530px；
高度：530px；
背景色：#92bbce；
盒影：0 0 11px 5px#00BCD4；
位置：固定；
右：0；
左：0；
右边距：自动；
左边距：自动；
边缘顶部：20px；
边缘底部：20px；
}
卡德罗斯先生{
宽度：524px；
高度：125px；
左边距：3倍；
右边距：3倍；
边缘顶部：6px；
边缘底部：6px；
背景色：透明；
位置：相对位置；
}
.信息栏{
文本对齐：居中；
左边距：自动；
右边距：自动；
}
卡德贝克先生，
cardfront先生，
.1，
.2，
.3，
.flip4{
宽度：125px；
高度：125px；
}
卡德贝克先生，
cardfront先生{
/*在交换期间隐藏*/
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
转变：转变1s；
变换样式：保留-3d；
}
cardfront先生{
/*正面置于背面元素之上*/
z指数：2；
变换：旋转（0度）；
背景色：#108DC0；
}
cardback先生{
/*一开始就隐藏起来*/
变换：旋转（180度）；
}
.卡片{
位置：相对位置；
}
.1，
.2，
.3，
.flip4{
/*容器保持透视*/
透视图：1000px；
位置：绝对位置；
}
.flip1{
左：3px；
}
.flip2{
左：134px；
}
.flip3{
左：265px；
}
.flip4{
左：396px；
}
.在{
过渡期：1.0s；
变换样式：保留-3d；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.关{
过渡期：1.0s；
变换样式：保留-3d；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}


配对游戏
__明星__
__移动__
__计时器__
__重新启动__
2.
1.

我希望这有助于：

功能翻转（el）{
log（“翻转调用”）；
var elem=document.getElementById（el）；
控制台日志（elem）；
elem.className=“on”；
控制台日志（elem）；
}

*{
-webkit框大小：边框框；
/*为确保兼容性和正确调整方框大小，只需几行代码*/
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
背景色：rgb（228227225）；
}
.头衔{
文本对齐：居中；
颜色：黑色；
}
.游戏板{
宽度：530px；
高度：530px；
背景色：#92bbce；
盒影：0 0 11px 5px#00BCD4；
位置：固定；
右：0；
左：0；
右边距：自动；
左边距：自动；
边缘顶部：20px；
边缘底部：20px；
}
卡德罗斯先生{
宽度：524px；
高度：125px；
左边距：3倍；
右边距：3倍；
边缘顶部：6px；
边缘底部：6px；
背景色：透明；
位置：相对位置；
}
.信息栏{
文本对齐：居中；
左边距：自动；
右边距：自动；
}
卡德贝克先生，
cardfront先生，
.1，
.2，
.3，
.flip4{
宽度：125px；
高度：125px；
}
卡德贝克先生，
cardfront先生{
/*在交换期间隐藏*/
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
转变：转变1s；
变换样式：保留-3d；
}
cardfront先生{
/*正面置于背面元素之上*/
z指数：2；
变换：旋转（0度）；
背景色：#108DC0；
}
cardback先生{
/*一开始就隐藏起来*/
变换：旋转（180度）；
}
.卡片{
位置：相对位置；
}
.1，
.2，
.3，
.flip4{
/*容器保持透视*/
透视图：1000px；
位置：绝对位置；
}
.flip1{
左：3px；
}
.flip2{
左：134px；
}
.flip3{
左：265px；
}
.flip4{
左：396px；
}
.在{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
过渡：0.25秒缓解；
变换：旋转（180度）；
}
.关{
-网
function flip(el) {
    console.log("flip called");
    var elem = document.getElementById(el);
    console.log(elem);
    elem.className = "on";
    console.log(elem);
}

transition: 1.0s;
transform-style: preserve-3d;