Devit!

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

gavinblair

As someone who loves to help others, Gavin is not easily ruffled. Poorly designed software is one of his few pet peeves, and we can count on Gavin to find solutions and make improvements in all kinds of applications. In his own words, he likes to "fight the good fight for quality code." He loves food and finding adventure in the kitchen, cooking with his wife. On one occasion, the combination of a white-hot skillet and no ventilation led to so much smoke they had to stop, drop and roll - but did end up eating "the best blackened catfish po'boy you can imagine."

This entry was posted on Wednesday, May 12th, 2010 at 3:40 pm and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.