Done in 60 seconds: getting funky with CSS3 in Drupal

×

Error message

  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in _menu_load_objects() (line 569 of /home/flinkco/public_html/includes/menu.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home/flinkco/public_html/includes/common.inc).

If you are visiting this page with either Safari or Chrome, then you just saw some pretty cool 3D-effects happening with the Drupal logo lifting itself off the page and flying across your screen, don't you think?

And you may wonder: how many lines of jQuery, Flash and what have you went into that !?!

The answer: zero.

Yep, that's right. 5 HTML tags plus a stylesheet of a meagre 40 lines is all it took to bring this movie to your screen.

Want to try it out on your site? Copy the code below into just about any page on your Drupal 7 site and you should enjoy the same show, pretty much regardless of the theme you happen to be using. Just click the Edit tab on a page or article on your site, disable the rich text editor and paste the following lines at the top. Make sure to set the Text format to "Full HTML" or "PHP code" before you press Save.

  <link rel="stylesheet" type="text/css" href="http://flink.com.au/sites/default/files/fly.css">
  <div id="rotate-home">
    <div id="rotateXY">
      <div id="rotateZ">
        <img src="/themes/seven/logo.png">
      </div>
    </div>
  </div>

Works inside blocks too!

Where's all the CSS magic? Here.

The CSS was inspired by this great The Art of the Web article. This article will also tell you that while Firefox (v9) supports most animation functions, it only features in-plane (i.e. z-axis) rotations, not x- and y-axes rotations. So you can't create the 3D effects on this page.
Mircrosoft may catch up with Safari and Chrome in IE version 10.

File under:: 
Planet Drupal

Drupal 8: contrib roads, take me home

Read More »

Comments

Submitted by zakir (not verified) on Wed, 04/01/2012 - 5:25pm

Hi,
I like 3d move
Is this possible in D6?

Submitted by flink on Wed, 04/01/2012 - 5:38pm
You can use the same HTML (importing the same CSS). Just change the img tag to point to the Drupal logo (or in fact any other image) on your D6 site. rik@flink.com.au

Submitted by ao2 (not verified) on Wed, 04/01/2012 - 10:52pm

This effects work with any browser based on a recent version of Webkit too, not just Safari and Chrome; I tested with Epiphany (http://projects.gnome.org/epiphany/), for instance, and I can see the animation.

BTW, we have to keep in mind that other rendering engines may never support the '-webkit-animation-*' rules, the common ground will be what is specified by the W3C (http://www.w3.org/TR/css3-animations/).

Regards,
Antonio

Submitted by Sean Bannister (not verified) on Wed, 04/01/2012 - 11:11pm

That was one step away from flashing gifs ;)

Submitted by Chris Luckhardt (not verified) on Fri, 06/01/2012 - 5:40am

"If you are visiting this page with either Safari or Chrome..."

Please, let's not return to the old days of browser segmentation! ;)

Submitted by flink on Fri, 06/01/2012 - 12:19pm
Fact is only Webkit-based browsers (i.e. Safari, Chrome, Epiphany) support all of this trickery at the moment. Firefox supports most but not all. IE.... hahaha...

Submitted by mike (not verified) on Fri, 13/01/2012 - 6:38pm

Other browsers most likely will never support anything beginning with -webkit- and should never do so. In fact, no one calling themselves "experts" should be using just 1 vendor's CSS rules... especially when other vendor's have their own versions.

Submitted by Alan (not verified) on Fri, 13/01/2012 - 7:36pm

WHOA! That was cool. There seems to be a problem though. The cool Slidebox that's supposed to pop up at the corner of the web browser is now showing up in the bottom right corner of the node itself. I've refreshed all other pages and they are working fine. I'm using the latest Chrome Canary browser.

Submitted by flink on Fri, 13/01/2012 - 9:02pm
Thanks for the feedback. Glad you like the Slidebox too! It is actually a feature of the Slidebox to appear at the bottom of the main content, rather than at the bottom of the comments or inside the footer. This is so that it doesn't do its thing below the "fold" and goes unnoticed. Maybe it should be made configurable? Perhaps you can put in a feature request with the Slidebox module maintainer?

Submitted by flink on Fri, 13/01/2012 - 9:29pm
You have completely missed the point. This is just showing what will be possible in the near future. Of course other browsers will never support anything beginning with a vendor-specific prefix like -webkit. But that's not the point. That's just a notation saying we as the -webkit vendor are already giving you a taste of what's to come out of the W3C emerging standard by prefixing the W3C-proposed tags with our own, e.g. -moz, -o.This demo is not meant to be cross-browser. It can't be, as not all of the venders support (either with the W3C terminology or their own versions) all of the proposed tags. Mozilla for instance has its -moz versions which I could add, but they don't work yet for all features (e.g. no x and y rotations, only z, so no 3D effects). I may update the demo as more vendors support the new features until one day when all vendors support the W3C standard we can drop all those vendor-specific prefixes and have it the way the W3C intends it to be. It's just like where we were a few years ago with support for rounded corners.

Submitted by mike (not verified) on Sat, 14/01/2012 - 5:15am

Unfortunately there is a large amount of people who don't know about vendor prefixed CSS (or don't care, or just use pre-made CSS) and so we end up with people just using webkit based CSS.