CSS transforms - Image disappears when rotated beyond -180degrees - html

Question

Firstly, sorry for the question, I just can't work out where I'm going wrong after many hours of trying!
I have three images, and I am trying to flip them -180 degrees using the transform:rotateY declaration.
I have managed to get them to rotate, but once they get past the -180degrees mark they disappear.
I also want the underlying divs, which contain some text, to appear after the image flips round -180 degrees - as if they were on the back of the image if that makes sense.
Here's the codepen link - http://codepen.io/skoster7/pen/KgwXgB
Here's the code
.container {
display: flex;
perspective: 700px;
}
.photo img {
transition-style: preserve-3d;
transition-property: transform;
transition-duration: 2s;
width: 300px;
height: 200px;
top: 20px;
margin: 10px;
}
.sideb {
width: 300px;
height: 200px;
background: tomato;
}
sidea:hover {
transform: rotateY(-180deg);
}
.sidea,
.sideb {
backface-visibility: hidden;
}
.sideb {
transform: rotateY(180deg);
}
<div class="container">
<div class="photo">
<img class="sidea" src="http://cdn.history.com/sites/2/2015/04/hith-
father-christmas-lights-iStock_000029514386Large.jpg">
<div class="sideb">Christmas
</div>
</div>
<div class="photo">
<img class="sidea" src="https://upload.wikimedia.org/wikipedia/commons/7/79/HalloweenPumpkin2.jpg">
<div class="sideb">Halloween
</div>
</div>
<div class="photo">
<img class="sidea" src="http://motormarks.co.uk/news/wp-content/uploads/2015/04/easter-chicks.jpg">
<div class="sideb">Easter
</div>
</div>
</div>
Thanks in advance for any help!

Answer 1

Modified code: http://codepen.io/anon/pen/ozgpXa
You should rotate container of sides in this case photo. And also add some values to get position from top and left to be in the same place.

Answer 2

You can do something like the demo below.
Recommendations:
You should also try to write semantic HTML for a cleaner code, maintainability, accessibility, SEO and many more. And make your transitions a bit faster, something between 300ms - 500ms, don't expect users to wait 2 seconds for each image they want to flip!
jsFiddle
CODE SNIPPET:
.flip-card {
width: 30%;
display: inline-block;
vertical-align: top;
margin: 0 0 1% 0;
-webkit-perspective: 700px;
perspective: 700px;
}
.flip-card figure {
width: 100%;
height: 0;
margin: 0;
padding-top: 100%;
position: relative;
transition: transform 300ms ease-out;
-webkit-perspective: 700;
perspective: 700;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card figure figcaption {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateY(-180deg);
}
.flip-card:hover figure,
.flip-card.hover figure {
transform: rotateY(-180deg);
}
.flip-card figure figcaption p {
font-size: 1em;
width: 100%;
padding: 0 2em;
color: white;
}
.flip-card figcaption {
background-color: dodgerblue;
}
.flip-card:nth-of-type(odd) figcaption {
background-color: tomato;
}
<ul class="container">
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/200/200" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/300/300" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/400/400" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/500/500" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/600/600" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/100/100" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
</ul>
To add more spacing between items just change margin property in .flip-card class.
EDIT:
How to make it flip only when someone clicks on it?
For this requirement we can create a small plugin.
It requires an 'active' class which will flip the cards in our CSS.
.flip-card.active figure {
transform: rotateY(-180deg);
}
How to use in JS:
var flipcards = new FlipCards({
cardsClass: "flip-card", //default
activeClass: "active" //default
});
(function(window) {
"use strict";
function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
function flipCards(options) {
this.options = extend({}, this.options);
extend(this.options, options);
this._init();
}
flipCards.prototype.options = {
cardsClass: "flip-card",
activeClass: "active"
}
flipCards.prototype._initEvents = function() {
var cards = document.getElementsByClassName(this.options.cardsClass),
i = 0,
len = cards.length,
self = this;
if (len === 0) return;
for (i, len; i < len; i++) {
cards[i].addEventListener('click', function() {
this.classList.toggle(self.options.activeClass);
});
}
}
flipCards.prototype._init = function() {
this._initEvents();
}
window.FlipCards = flipCards;
// Support for CommonJS Module format and AMD format.
if (typeof module !== "undefined" && module.exports) {
module.exports.FlipCards = flipcards;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
define("flipcards.js", function() {
return flipcards;
});
}
})(window);
var flipcards = new FlipCards({
cardsClass: "flip-card", //default
activeClass: "active" //default
});
.flip-card {
width: 30%;
display: inline-block;
vertical-align: top;
margin: 0 0 1% 0;
-webkit-perspective: 700px;
perspective: 700px;
}
.flip-card figure {
width: 100%;
height: 0;
margin: 0;
padding-top: 100%;
position: relative;
transition: transform 300ms ease-out;
-webkit-perspective: 700;
perspective: 700;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card figure figcaption {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateY(-180deg);
}
.flip-card.active figure {
transform: rotateY(-180deg);
}
.flip-card figure figcaption p {
font-size: 1em;
width: 100%;
padding: 0 2em;
color: white;
}
.flip-card figcaption {
background-color: dodgerblue;
}
.flip-card:nth-of-type(odd) figcaption {
background-color: tomato;
}
<ul class="container">
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/200/200" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/300/300" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/400/400" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/500/500" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/600/600" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
<li class="flip-card" ontouchstart="this.classList.toggle('hover');">
<figure>
<img src="http://fillmurray.com/100/100" alt="">
<figcaption>
<p>Text Example</p>
</figcaption>
</figure>
</li>
</ul>
Live Example