Flipping images

by Joshua Powell

HTML

<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS

.main {
    width: 600px;
    height: 600px;
    position: relative;
    top: 0;
    left: 0;
}

.block {
    float: left;
    width: 32%;
    height: 32%;
    background: mediumSeaGreen;
    margin: 1% 1% 0 0;
    -webkit-transition: background 0.6s ease;
    -moz-transition: background 0.6s ease;
}

.block:hover {
    background: #2b2b2b;
}

JavaScript

.main {
    width: 600px;
    height: 600px;
    position: relative;
    top: 0;
    left: 0;
}

.imgFlip {
    perspective: 1000;
}
	/* flip the pane when hovered */
.imgFlip:hover .flipper, .imgFlip.hover .flipper {
	transform: rotateY(180deg);
}

.imgFlip, .front, .back {
	width: 32%;
    height: 32%;
    float: left;
    margin: 1% 1% 0 0;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: relative;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
    background: mediumSeaGreen;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    background: #2b2b2b;
}