有没有办法做到这一点?我有一个旋转到灰色区域的图像。这可以。我想要的是,如果我再次单击该区域,它会在灰色区域显示。执行此操作的最佳方法是什么?
这里你有一个我所拥有的例子:
CSS:
.f1_container {
position: relative;
margin:10px;
width: 450px;
height: 281px;
z-index : 1;
float:left;
}
.f1_container {
-webkit-perspective: 1000;
perspective: 1000;
}
.f1_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.f1_container.active .f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
background-color: #aaa;
}
body{width:2000px}
最佳答案
将您的 JS 替换为:
$('.f1_container').one('click', function() {
$(this).addClass('active');
});
one
函数对每个元素只执行一次事件。
此外,我已将您的 toggleClass
更改为简单的 addClass
,这些更改中的任何一个本身都应该足够了,但是,这里不需要切换。
关于jquery - 第二次防止 CSS3 旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25643588/