Comments on: Animated CSS3 cube using 3D transforms

By: Staale

Staale — Thu, 26 Jan 2012 09:31:27 +0000

Hi. I’m having trouble getting this to work. I’ve tried the various tweaks in the comments. I’m getting: ” $(“cube”).style is undefined ” in the console when I press the keys.
I’m a bit new at this so I might be making some obvious blunder. My file is at http://esdialog.no/testing/3d_cube/index.html

By: Willie Meier

Willie Meier — Thu, 19 Jan 2012 09:52:57 +0000

Paul thanks for a great article

I’ve taken article as a basis and made a transparent 3d cube and have each face play a video.

Works great in IE9, FF, Opera, Chrome and Safari.

There is a bit of an issue with the bottom face which I cannot get just quite right and wonder IF possibly
using transformation Matrix would be the answer and perhaps more precise.

Would you be willing to offer help in making it possible for making the 3D transparent cube rotate using the ‘keypress’?

thanks

By: CSS3 の Transforms プロパティを使って簡単 3D Cube 表示 | TM Life

CSS3 の Transforms プロパティを使って簡単 3D Cube 表示 | TM Life — Sun, 18 Dec 2011 23:03:43 +0000

[…] Animated CSS3 cube using 3D transforms – Paul Hayes […]

By: Andreas Lagerkvist

Andreas Lagerkvist — Mon, 12 Dec 2011 13:56:49 +0000

I don’t know how or when but it started working Results here: http://exscale.se/__files/uploads/jquery-3d-circle.htm

By: Andreas Lagerkvist

Andreas Lagerkvist — Sat, 10 Dec 2011 16:53:33 +0000

This is totally awesome but working on my own version I’m experiencing trouble with z-index. I haven’t copied your code in every detail but I don’t understand why yours doesn’t suffer the same problems. All my faces are drawn on top of each other with the last face on top and the first on the bottom. Any idea why that doesn’t happen to your cube?

By: so exciting!

so exciting! — Wed, 30 Nov 2011 16:45:04 +0000

This is how CSS3 Renders ! Yay!

By: Pumano

Pumano — Mon, 31 Oct 2011 06:25:29 +0000

Chalassa
try change in #experiment {
–webkit-perspective: –1000;
} /* it fix blur, but some elements can’t be selected…but if i want have all elements selectable I must use positive value in perspective, but that give blur (((((. I will search a solution.*/

By: 3D FishBirds « jonahgoldstein.com

3D FishBirds « jonahgoldstein.com — Wed, 12 Oct 2011 19:30:40 +0000

[…] looking over a few tutorials on 3D CSS3 transformations (currently webkit only), I began on the test shown above. The […]

By: CSS3: Rotate Images on Click | @drublic

CSS3: Rotate Images on Click | @drublic — Sat, 01 Oct 2011 22:03:09 +0000

[…] You will get a nice overview of these attributes named here by reading this article about how to animate a 3D-cube with CSS. […]

By: HTML5.CSS3 vault « Codular

HTML5.CSS3 vault « Codular — Mon, 19 Sep 2011 14:10:35 +0000

[…] Tweakers.net Html5: Mozilla Html5: Initializr Html5: 50 Awesome techniques! Html5: Pageflip Html5: Animated 3D Cube CSS3: RGBA Buttons (x)Html1-4: Large Snippet Collection (x)Html1-4: Negative Margins (x)Html1-4: […]

By: 85 Most Useful CSS3 Techniques and Tutorials for Every Web Designer and Developer | Web and Graphic Design Blog

Fri, 16 Sep 2011 06:39:34 +0000

[…] 27. Animated CSS3 cube using 3D transforms […]

By: ۵۰ مثال فوق العاده از قابلیت های css3 + آموزش – قسمت پایانی | وبلاگ تقلبی

۵۰ مثال فوق العاده از قابلیت های css3 + آموزش – قسمت پایانی | وبلاگ تقلبی — Sun, 28 Aug 2011 19:40:25 +0000

[…] […]

By: Tutorial CSS 3 – Como hacer un Cubo que rota en 3D con CSS 3 | Codigo Fuente

Wed, 24 Aug 2011 17:48:02 +0000

[…] Acceder al Tutorial: Tutorial CSS 3 – Como hacer un Cubo que rota en 3D con CSS 3 Parte 1 […]

By: Top Hot Latest 100 Detailed CSS3 Tutorials & Techniques

Top Hot Latest 100 Detailed CSS3 Tutorials & Techniques — Sat, 20 Aug 2011 14:18:22 +0000

[…] Animated CSS3 cube using 3D transforms […]

By: Matt Quartermain

Matt Quartermain — Fri, 05 Aug 2011 07:59:38 +0000

Neat, but there are bugs:

The line starting:
$(‘cube’).style.webkitTransform =
should instead be:
$(‘#cube’)[0].style.webkitTransform =
or it won’t go round

You might also want to indicate, for noobs, that you need to include a jquery library.

By: Adam

Adam — Thu, 07 Jul 2011 06:06:55 +0000

If y'all can't see it, it's because you aren't using a worthy browser. And let's be honest, there's really no reason left in the world why you shouldn't be using Chrome 11 or FF 4. Sooooo, yeah.... go do that.

By: Oswald

Oswald — Thu, 16 Jun 2011 06:44:49 +0000

CSS3 2D/3D/Animation code samples (no JS):
http://code.google.com/p/css3-graphics/

Oswald

By: Regnareb

Regnareb — Sun, 12 Jun 2011 16:03:03 +0000

Don’t work in Opera, Chrome and Firefox without any reason. Please add support for them.

By: Karthik

Karthik — Tue, 31 May 2011 12:42:30 +0000

Why it is not working in chrome?

By: mairead

mairead — Thu, 26 May 2011 13:19:46 +0000

I can’t get the keyboard events to work with either syntax. anyone managed to work that out? I’m using WebKit r87281

superb effort. Am loving your examples, proper wizard magic.

By: Joe Lambert

Joe Lambert — Wed, 11 May 2011 10:58:59 +0000

Great article Paul! I noticed that your demo implementation suffers from some inconsistencies regarding how user input maps to the resulting rotations after the cube has been rotated the first time.

I’ve just completed a similar experiment (largely helped by this article) and implemented a more robust rotation technique — thought you may be interested: http://blog.joelambert.co.uk/2011/05/10/handling-3d-geometry-with-3d-css3-transforms/

By: Ed Zee

Ed Zee — Tue, 10 May 2011 23:53:51 +0000

This is great. Love it!

By: Handling 3D geometry with 3D CSS3 transforms » Joe Lambert

Handling 3D geometry with 3D CSS3 transforms » Joe Lambert — Tue, 10 May 2011 14:34:25 +0000

[…] a starting point, take a look at Paul Hayes very cool demo of a 3D cube. This is essentially what I wanted to create but it very elegantly highlights some of the […]

By: Magnus

Magnus — Fri, 29 Apr 2011 18:03:36 +0000

I can’t make it move, even when i use the: document.getElementById(‘cube’).style.webkitTransform = “rotateX(“+xAngle+“deg) rotateY(“+yAngle+“deg)”; sentence. I’m running Safari. What could be the problem?

By: Shaun

Shaun — Fri, 29 Apr 2011 06:37:52 +0000

1)how to add hyperlinks in the faces of the cube ?

2)3d effect not working in chrome, is something can be done to make it work in chrome also