card flip

card flipping

by hmdadou

HTML

<section class="container">
  <div class="camp-flip">
  <button onclick="flip()">flip</button>
    <div class="camp-front"><img src="https://ummafund.com//images/generated_campaign_images/ummafund-discover-rahma-animal-hospital.png"></div>
    <div class="camp-back"> <button onclick="flip()">Back</button><img src="https://ummafund.com//images/generated_campaign_images/ummafund-discover-save-the-ocean.png" alt=""></div>
  </div>
</section>

CSS

button {position:absolute;top:0;left:0;z-index:9}
.camp-flip {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    z-index:1
}
.camp-flip div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index:1
}
.camp-flip .camp-front {
  background: red;
}
.camp-flip .camp-back {
    background: blue;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.camp-flip.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

JavaScript

function flip() {
    $('.camp-flip').toggleClass('flipped');
}