css - CSS卡片翻转效果——如何让它每次点击都向同一个方向翻转?
问题描述
我正在尝试创建一个在点击时翻转卡片的 CSS 动画。我已经按照这个问题中发布的答案,但我想知道在添加和删除类时是否有办法执行相同的动画。
在这种情况下,单击时卡片会朝一个方向翻转,再次单击时会朝相反方向翻转(因为切换了 css 类)。我怎样才能使卡片每次点击时都朝同一个方向翻转?
来自 JSFiddle 的一些代码:
$('.flip-container .flipper').click(function() {
$(this).closest('.flip-container').toggleClass('hover');
$(this).css('transform, rotateY(180deg)');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
解决方案
它必须通过脚本完成(检查这个 SO question)。因此,通过编辑您遵循的示例,我们可以这样做:
$('.flip-container').each(function(i) {
var thisFlipper = $(this).find('.flipper');
var rotate = 0;
thisFlipper.on('click', function(e) {
rotate += 180;
thisFlipper.css({'transform': 'rotateY('+rotate+'deg)'});
});
});
.flip-container {
perspective: 800px;
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
background-color: #ff0000;
transform: rotateY(180deg);
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
推荐阅读
- assembly - REP 指令是否被视为向量操作?
- c# - 仅在受保护的构造函数中设置的属性
- python - MongoEngine 中的经典映射
- python - Python中的这些类有什么区别?
- c++ - 为什么微软在新代码中使用结构而不是类?
- java - 使用 Java 中的反射以特定方式打印带有参数的方法
- c++ - C ++“错误:重载运算符'*'的使用不明确”似乎只有一个匹配项
- elasticsearch - Elasticsearch 在双引号之外标记化
- string - Kotlin - 是否有一个基本函数可以用引用字符串中的多个字符串替换多个字符串?
- python - Visual Studio Code 语法突出显示不起作用