CSS 卡片翻转效果 - 如何让它每次点击都向同一个方向翻转？

Question

我正在尝试创建一个 css 动画，它可以在单击时翻转卡片。我已经关注，但我想知道是否有办法在添加和删除 class 时执行相同的动画。

In this case 卡片在单击时朝一个方向翻转，再次单击时朝相反方向翻转（因为 css class 已切换）。我怎样才能让卡片每次被点击时都朝同一个方向翻转？

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;
}

Answer 1

必须通过脚本完成（检查）。因此，通过编辑您遵循的示例，我们可以这样做：

$('.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>

已更新JSFiddle

CSS 卡片翻转效果 - 如何让它每次点击都向同一个方向翻转？

CSS card flip effect - how to make it flip in the same direction with every click?

css

css-animations

css-transitions