Question

我在下面有一个JS小提琴问题是我既不能清除也不能翻转卡片。 :( http://jsfiddle.net/kboucheron/AXv6V/5/

我关注的是这个例子：http://desandro.github.io/3dtransforms/docs/card-flip.htm

<div class="section clearfix" >
    <div class="flip-container clearfix">
    <div class="flip clearfix" id="action">
        <div class="card clearfix">
            <div class="face front clearfix"> 
                Hello

            </div> <!-- end face front -->

            <div class="face back">

                Goodbye!

            </div><!-- end face back -->

        </div><!-- end card -->
    </div><!-- end flip -->

    </div><!-- end flip-container -->
</div><!-- end section#action1 -->


.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: 

hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

.flip-container {
    display:block;

}
.flip {
    -webkit-perspective: 800;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    position: relative;
    margin: 0  auto;
    transform-origin: right center; 
}
.flip .card.flipped {
     -webkit-transform: translateX( -100% ) rotatey(-180deg);
     -moz-transform: translateX( -100% ) rotateY( -180deg );
     -o-transform: translateX( -100% ) rotateY( -180deg );
     transform: translateX( -100% ) rotateY( -180deg );
}
.flip .card {
    width: 100%;
    height: 100%;
    position:absolute;
    right:0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; 

    -webkit-transition: 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;

}
.flip .card .face {
    width: 100%;
    height: 100%;
    position:absolute;
    -webkit-backface-visibility: hidden ;
    -moz-backface-visibility: hidden ;
    -o-backface-visibility: hidden ;
    backface-visibility: hidden;
    z-index: 2;
    display:block;
    right:0;
}
.flip .card .front {
      position: absolute;
      z-index: 1;
}
.flip .card .back {
      position: absolute;
      z-index: 1;
      float:left;
      -webkit-transform: translateX( -100% ) rotatey(-180deg);
      -moz-transform: translateX( -100% ) rotateY( -180deg );
      -o-transform: translateX( -100% ) rotateY( -180deg );
      transform: translateX( -100% ) rotateY( -180deg );
      background: white;
      color: black;
}

 var card = $('#action').find('.card');

$(".card-wrapper").on("click", ".tasks", function() {
if(!card.hasClass('flipped')) {
        card.toggleClass('flipped'); 
}

Answer 1

JS代码中存在一些问题。

试试这个：http://jsfiddle.net/AXv6V/6/

JS代码更改为：

var card = $('#action').find('.card').first();

$('.flip-container').on("click", function() {
    console.log('Clicked!!');
    if(!card.hasClass('flipped')) {
            card.toggleClass('flipped'); 
    }
});

Answer 2

Is this what you want?

click here http://jsfiddle.net/AXv6V/8/

无法清除这些元素

2 个答案: