Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

HTML5 & CSS3 example of 3D effects

Sunday, October 7th, 2012 by Servage

This is a little teaser on what can be achieve with web technologies and a little spare time on your hosting account! It’s amazing what you can do with the new HTML5 canvas combined with CSS and other effects. This example shows a 3D illustration of the solar system based purely on regular web technologies, HTML, CSS and JavaScript.

HTML document

The solar system is structured like a regular, logical HTML document, where elements have containers, sub-elements etc.

<div id="universe" class="scale-stretched">
  <div id="galaxy">
    <div id="solar-system" class="earth">
      <div id="mercury" class="orbit">
        <div class="pos">
          <div class="planet">
            <dl class="infos">
              <dt>Mercury</dt>
              <dd><span></span></dd>
            </dl>
          </div>
        </div>
      </div>
      ...

Then there’s a whole lot of CSS to make it look good…

JavaScript with jQuery

The JavaScript makes the whole thing move around, adds effects and controls to the illustration, making it in interactive illustration of the solar system, where you can change modes etc. Using jQuery it is very easy to program advanced functionality and gets you going quickly :-)

$(window).load(function(){

  var body = $("body"),
      universe = $("#universe"),
      solarsys = $("#solar-system");

  var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
      $(this).removeClass('hide-UI').addClass("set-speed");
      $(this).dequeue();
    });
  };
  ...

Get started – learn to create this yourself today

Good luck and happy coding! :-)

 

HTML5 & CSS3 example of 3D effects, 3.7 out of 5 based on 6 ratings
Categories: Guides & Tutorials

Keywords: , ,

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.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.