单击时动画翻转 div

Question

我试图让 div 在我点击它们时翻转。我不确定为什么它不起作用。请帮忙。

这是这段代码的演示。 http://langbook.co/testicles-1-2-flashcards/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
  <div id="back">Box - Back</div>
  <div id="front">Box - Front </div>
</div>
</body>
</html>

Answer 1

例如： http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility

简单的一个CSS行：

animation:mymove 3s infinite;

其中 mymove 是：

@keyframes mymove
    {
    from {transform:rotateY(0deg);}
    to {transform:rotateY(360deg);}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    from {-moz-transform:rotateY(0deg);}
    to {-moz-transform:rotateY(360deg);}
    }

    @-webkit-keyframes mymove /* Opera, Safari, Chrome */
    {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
    }

    @-ms-keyframes mymove /* Internet Explorer */
    {
    from {-ms-transform:rotateY(0deg);}
    to {-ms-transform:rotateY(360deg);}
    }

示例：

div#myDIV
    {
    animation:mymove 3s infinite;/* <== HERE */
    /* Firefox */
    -moz-animation:mymove 3s infinite;
    -moz-animation-timing-function:linear;
    /* Opera, Safari, Chrome */
    -webkit-animation:mymove 3s infinite;
    -webkit-animation-timing-function:linear;
    }

Answer 2

http://www.w3schools.com/css/css3_2dtransforms.asp

http://www.w3schools.com/css/css3_3dtransforms.asp

不确定您是否尝试过，但这可以解决您的问题。只使用 CSS 你可以做同样的事情（通过你想要达到的声音）。

希望这对您有所帮助。

Answer 3

首先，我会将您的 JS 移动到页面末尾。

您似乎还想在 #flip3D 上调用 flip()，因为您正试图访问它的子元素，如下所示：

var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));

要向后翻转，您只需将对象的状态保存在属性中即可知道它在哪一侧。还要注意 flip(vlib) 将立即被调用；要等待点击事件，您需要传递对函数的引用：

vlib.addEventListener('click', flip);

似乎有效：JSFiddle

Answer 4

你在 JS 部分的语法和声明中有一些错误。

希望这就是您要找的：

https://jsfiddle.net/xrtvhvgf/2/

function flip(){
    if(vlib_front.style.transform){
        el.children[1].style.transform = "";
        el.children[0].style.transform = "";
    } else {
        el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
        el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
    }
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');

el.addEventListener('click', flip);

单击时动画翻转 div

animation Flip div when clicked

html

javascript

css

animation

flip