单击动画翻转div
[英]animation Flip div when clicked
问题描述
I am trying to make the divs flip whenever I click on them. 
每当我点击div时，我都会尝试使其翻转。 I'm not sure why it doesn't work. 我不确定为什么它不起作用。 Please help. 请帮忙。
Here is the demo of this code. 这是此代码的演示。 http://langbook.co/testicles-1-2-flashcards/ 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>
4 个解决方案
解决方案1
0 2015-07-22 15:00:29
ex: http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility 例如： http ： //www.w3schools.com/cssref/playit.asp？ filename = playcss_backface-visibility
easy one CSS line : 简单的CSS行：
animation:mymove 3s infinite;
where mymove is: 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);}
}
example: 例：
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;
}
解决方案2
0 2015-07-22 15:01:04
http://www.w3schools.com/css/css3_2dtransforms.asp http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/css/css3_3dtransforms.asp http://www.w3schools.com/css/css3_3dtransforms.asp
Not sure if you have tried this but this my solve your problem. 不知道您是否尝试过此方法，但这可以解决您的问题。 Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve). 仅使用CSS，您就可以做完全相同的事情（通过您尝试实现的声音）。
Hope this helps. 希望这可以帮助。
解决方案3
0 已采纳 2015-07-22 15:02:30
First, I would move your JS to the end of the page. 首先，我将您的JS移至页面末尾。
It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so: 似乎您还想在＃flip3D上调用flip（），因为您正试图访问它的子元素，如下所示：
var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));
To flip back, you could just keep the object's state in an attribute to know which side it's on. 要回退，您可以仅将对象的状态保留在属性中以知道它位于哪一侧。 Also note that flip(vlib) will be called immediately; 另请注意，flip（vlib）将立即被调用； to wait for the click event, you'll need to pass a reference to the function: 要等待click事件，您需要传递对该函数的引用：
vlib.addEventListener('click', flip);
解决方案4
0 2015-07-22 15:09:47
You had a few mistakes with syntax and declarations in the JS part. 您在JS部分的语法和声明中犯了一些错误。
Hope this is what you are looking for: 希望这是您想要的：
https://jsfiddle.net/xrtvhvgf/2/ 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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.