I'm attempting to achieve a CSS 3 effect where when you click on an image in a bank of images, it expands to all the available area and flips over at the same time.
The way I was able to accomplish this was to clone the element and absolutely position it on top of the original then transform that. In the code below the cloned image is assigned the classes clone and activated.
All is well.
However, if I pre-flip all of the images in the series of images, activated using the flip all button (adding origflipped class, which has rotateY(180deg) so now the backs are showing) and then try the same effect (expand and now rotateY(0deg) to the front side), the animation somehow has unintended side effects.
It looks like when the rotateY transition is executing, half of the image in the rotation effect dips below the page in 3d space, behind the other images and out of view.
So how can I rotateY(0) from rotateY(180deg) without having half of the image floating underneath other things?
<html>
<head>
<style>
#target_area .face {
-webkit-backface-visibility: hidden;
position: absolute;
}
#target_area .face img {
vertical-align: middle;
height: 100%;
}
#target_area .face.back {
-webkit-transform: rotateY(180deg);
}
#target_area .card {
float: left;
margin-left: 5px;
-webkit-transform-style: preserve-3d;
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
}
#target_area .card.origshown {
-webkit-transition-property: none;
visibility: hidden;
}
#target_area .card.origflipped {
-webkit-transform: rotateY(180deg);
}
#target_area .card.clone {
float: none;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
}
#target_area .card.clone.activated {
-webkit-transform: rotateY(180deg);
}
#target_area .card.clone.origflipped {
-webkit-transform: rotateY(180deg);
}
#target_area .card.clone.origflipped.activated {
-webkit-transform: rotateY(0deg);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
$(document).ready(function () {
var ALL_CARDS = [
['http://twitpic.com/show/thumb/26n3ms', 'http://twitpic.com/show/thumb/26n3mr'],
['http://twitpic.com/show/thumb/26n3ma', 'http://twitpic.com/show/thumb/26n3mq'],
['http://twitpic.com/show/thumb/26n3mb', 'http://twitpic.com/show/thumb/26n3mt'],
['http://twitpic.com/show/thumb/26n3mc', 'http://twitpic.com/show/thumb/26n3mu'],
['http://twitpic.com/show/thumb/26n3md', 'http://twitpic.com/show/thumb/26n3mv'],
];
var width = 100;
for (var i = 0; i < ALL_CARDS.length; i++) {
$(document.createElement('div'))
.addClass("card")
.append(
$('<img src="' + ALL_CARDS[i][0] + '" />')
.addClass("face front")
)
.append(
$('<img src="' + ALL_CARDS[i][1] + '" />')
.addClass("face back")
)
.width(width)
.height(width + 10)
.appendTo($('#target_area'))
.find('img').width('100%').height('100%')
;
}
$('#target_area .card')
.click(function (e) {
e.preventDefault();
var original = $(this);
var proxy = $(this).clone();
var body = $('body');
original.addClass("origshown");
proxy
.css({
'position': 'absolute',
'top': this.offsetTop,
'left': this.offsetLeft - 5
})
.click(function () {
original.removeClass("origshown");
$(this).remove();
})
.addClass("clone")
.appendTo($('#target_area'))
;
var border_width = 10;
proxy
.css({
'background-color': 'white',
'top': border_width,
'left': border_width,
'height': body.height() - (2 * border_width),
'width': body.width() - (2 * border_width),
})
.addClass('activated')
;
});
$('#flip_all').click(function (e) {
e.preventDefault();
$('.card').toggleClass('origflipped');
});
});
</script>
</head>
<body>
<div id="target_area"></div>
<input type="button" value="flip all" id="flip_all" />
</body>
</html>