Question

我想横向和纵向翻转div。当我点击第一个div时，div会水平翻转，当我点击第二个div时，它会垂直翻转。

function flip_hori() {
    $('.card').toggleClass('flipped');
}

function flip_verticle() {
    $('.card').toggleClass('flipped');
	axis : 'x'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div class="card" >
    <div class="front"><label onclick="flip_hori()">flip</label></div>
    <div class="back" ><label onclick="flip_verticle()">flip</label></div>
  </div>
</section>

Answer 1

您只需使用插件http://nnattawat.github.io/flip/

即可实现此目的

或者可以通过

完成

How can I flip a Div when an image within that div is clicked?

Answer 2

CSS

.flipped {
    transform: scale(-1);
}

的JavaScript

$(".card label").on("click", function () {
    $('.card').toggleClass('flipped');
});

HTML

<div class="card">
    <div class="front">
        <label>flip</label>
    </div>
    <div class="back">
        <label>flip</label>
    </div>
</div>

Demo

Answer 3

您需要切换以下CSS类才能应用翻转效果。

注意：

从最初的示例开始，该操作将应用于每个标签。
以下内容应适用于跨平台，因为包含了自定义浏览器特定的前缀。

在这里演示：

https://jsfiddle.net/q2zgcn1w/

.flippedX {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    background-color:red;
}
.flippedY {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipw;
    filter: flipw;
    background-color:green;
}


$("#flipX").on("click", function () {
    $('.card').toggleClass('flippedX');
});

$("#flipY").on("click", function () {
    $('.card').toggleClass('flippedY');
});

使用jquery翻转垂直

3 个答案: