FLIP AND CHANGE DIV - Pakaroti

by Wibawa Adhi Nugraha

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
    <div class="front">
        <img src="http://placehold.it/250x110/ff008a/ffffff"/>
    </div>
    <div class="back">
        <img src="http://placehold.it/250x110/005189/ffffff"/>
    </div>
    </div>
</div>

CSS

.flip-container {
	perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
	-webkit-transform: rotateX(540deg);
    -moz-transform: rotateX(540deg);
    -o-transform: rotateX(540deg);
    -ms-transform: rotateX(540deg);
    transform: rotateX(540deg);
}

.flip-container, .front, .back {
	width: 250px;
	height: 110px;

}

.flipper {
	-webkit-transition:  1s;
    -moz-transition:  1s;
    -o-transition:  1s;
    transition:  1s;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
	position: relative;
}

.flip-container .flipper {
	-webkit-transform-origin: 100% 55px;
    -moz-transform-origin: 100% 55px;
    -o-transform-origin: 100% 55px;
    -ms-transform-origin: 100% 55px;
    transform-origin: 100% 55px;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	-webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.back {
	-webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

JavaScript

$(".flipper,.back").hover(function () {
    $(".front").delay(1000).animate({
        opacity: "0"
    }, {
        queue: false
    });
}, function () {
    $(".front").animate({
        opacity: "1"
    });
});

$(".flipper,.front").hover(function () {
    $(".back").animate({
        opacity: "0"
    }, {
        queue: false
    });
}, function () {
    $(".back").delay(300).animate({
        opacity: "1"
    });
});