Retro Gaming 3D Box Effect in CSS

I saw a post yesterday by Paul Irish, showing the classy 3D transformations Amazon is doing on some pages. I’ve been playing with some retro game collecting application ideas and was thinking that the effect would be cool for a collection page, so I set up a prototype.

The HTML

<div class="boxart-container">
    <div class="boxart-canvas">
        <img class="boxart-front" src="http://patrickmjones.com/projects/3dbox/cover_mm2_front.jpg">
        <img class="boxart-back"  src="http://patrickmjones.com/projects/3dbox/cover_mm2_back.jpg">
        <div class="boxart-side">
            <img src="http://patrickmjones.com/projects/3dbox/cover_mm2_side.jpg">
        </div>	
    </div>
</div>

The JavaScript

(function($){
    $(document).ready(function(){
        $('.boxart-canvas').hover(function(){
            $(this).addClass('boxart-rotated');
        }, function(){
            $(this).removeClass('boxart-rotated');
        });
    });
})(window.jQuery);

The JavaScript basically just adds a class that triggers the CSS to rotate the item. Event handlers could instead be on click or any other action… for example in a game.

The CSS

.boxart-canvas {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	position: absolute;
	transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	transition:transform .5s ease 0s;
	-moz-transition:-moz-transform .5s ease 0s;
	-webkit-transition:-webkit-transform .5s ease 0s;
	-webkit-border-radius:0 7px 7px 0;
	-moz-border-radius:0 7px 7px 0;
	border-radius:0 7px 7px 0;
	background:#222 none repeat scroll 0 0;
}
.boxart-canvas .boxart-front {
	backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-webkit-border-radius:0 4px 4px 0;
	-moz-border-radius:0 4px 4px 0;
	border-radius:0 4px 4px 0;
	transition:transform .5s ease 0s;
	-moz-transition:-moz-transform .5s ease 0s;
	-webkit-transition:-webkit-transform .5s ease 0s;
	transform-origin:0;
	-moz-transform-origin:0;
	-webkit-transform-origin:0;
}
.boxart-rotated {
	transform:rotateY(180deg)!important;
	-moz-transform:rotateY(180deg)!important;
	-webkit-transform:rotateY(180deg)!important;
}
.boxart-front { 
	max-width: 280px; 
	position: absolute;
	top: 0;
	left: 0;
}
.boxart-back { 
	max-width: 280px; 
	position: absolute;
	top: 0;
	left: 0;
}
.boxart-back {
	backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-webkit-border-radius:4px 0 0 4px;
	-moz-border-radius:4px 0 0 4px;
	border-radius:4px 0 0 4px;
	transform:rotateY(180deg) translateZ(54px);
	-moz-transform:rotateY(180deg) translateZ(54px);
	-webkit-transform:rotateY(180deg) translateZ(54px);
}
.boxart-side img { 
	max-width: 54px; 
	max-height: 382px;
	position: absolute;
	top: 0;
	left: -54px;
	transform:rotateY(-90deg);
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform-origin:right center 0;
	-moz-transform-origin:right center 0;
	-webkit-transform-origin:right center 0;
}
.boxart-container {
	position: relative;
	display: table;
	width: 100%;
	perspective:1200px;
	-moz-perspective:1200px;
	-webkit-perspective:1200px;
	width: 280px;
	height: 383px;
}

Problems

Yeah, I haven’t tried getting this going in IE just yet. In IE10 the front cover was flipping around, and below that… well, it wasn’t nice.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.