javascript - CSS Flip animation on click - Stack Overflow

admin管理员组

文章数量:1279175

I am following the example David Walsh provides to make a flip animation. Its is all working on hover, however, I want to flip the element on click as opposed to on hover.

The following code works and flips the element on hover, however, I want to use javascript/jquery to implement this. I have tried many different ways but cannot figure out how to do this.

.flip-container {
    perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: 320px;
    height: 480px;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            1
        </div>
        <div class="back">
            2
        </div>
    </div>
</div>

I am following the example David Walsh provides to make a flip animation. Its is all working on hover, however, I want to flip the element on click as opposed to on hover.

The following code works and flips the element on hover, however, I want to use javascript/jquery to implement this. I have tried many different ways but cannot figure out how to do this.

.flip-container {
    perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: 320px;
    height: 480px;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            1
        </div>
        <div class="back">
            2
        </div>
    </div>
</div>

• javascript
• jquery
• css

Share Improve this question Follow edited Oct 24, 2016 at 13:29 tejashsoni111 1,40511 gold badge1818 silver badges3434 bronze badges asked Oct 24, 2016 at 12:51 user6002037user6002037 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

https://jsfiddle/pf4aemn7/ HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

CSS

.flip-container {
  perspective: 1000px;
}

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

JS

$(document).on("click", ".flip-container", function () {
    $(this).toggleClass('hover');
});

Use the onclick event handler on .flip-container, instead of ontouchstart. And of course don't forget to remove the css :hover selector from your styles (i.e. .flip-container:hover .flipper).

.flip-container {
  perspective: 1000px;
}
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

<div class="flip-container" onclick="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

Also, I think you should rename the .hover class to something more appropriate like .clicked.

本文标签： javascriptCSS Flip animation on clickStack Overflow