3D Transition Tiles

Question

My website designer has uploaded 3D transition tiles for a few of my pictures. When your cursor highlights the picture it spins around in a cool 3D way. He told me this would only work on Chrome and Safari and not Explorer. My first question, is this correct or is he being lazy? Second, if explorer doesn't support these 3d transitions will they do so in the future? My third point if anyone doesn't understand what we are talking about visit benmanhirefashion. If you have Chrome the 4 small pictures will spin around - 3D transition. In Explorer they don't. 

Answer 1

Hi,

It depends apon how your developer has coded the css 3 transition rules.... they will be available in IE10 but your programer is probably using the proprietry webkit prefixes. Probably he is using jQuery.mobile which does not have the -ms prefixed style rules.

see http://samples.msdn.microsoft.com/ietestcenter/ for a feature support comparison accross browsers.

answers:

1. ask him. He is probably iOS centric and has no idea. IE10 is in beta and there are special builds for developers to prototype features in their sites. If he cannot research his own project requirements then he is failing with the first stage of the Software development lifecycle.... Requirements gattering.... this should include a quantification of the browser(s) and versions that your visitors are using or may be using in the near future.... IE(7-9) currently has a 53% mkt share in some markets... higher in Asia... (see thecounter.com )... having an idea of the browser (versions) that your visitors may be using forms the basis for test plans.... with that knowledge you can choose the browser suite for testing.

2. supported in IE10.... web developers should provide gracefull fallbacks for browsers that don't support un-rattified features. jQuery.mobile works on Windows Phone 7.5 (with the proper css prefixes) but falls back to slide transitions on desktop IE9, IE8 and IE7 behavior will depend apon other components used.... (jQuery version for example). Layout.. use of floated elements.

---

Rob^_^

Answer 2

Thanks Rob for the detailed answer. I will pass this on to him. 

Answer 3

pass on this link http://samples.msdn.microsoft.com/ietestcenter/

and this link to the IE Web developer documentation http://msdn.microsoft.com/library/ie/aa740473

and most importantly the list of valid document type declarations at the w3c - http://www.w3.org/QA/2002/04/valid-dtd-list.html

---

Rob^_^

Answer 4

Depends on which 3D transforms he's using.

Anything remotely involved isn't going to work in IE10, because they have't implemented transform-style: preserve-3d. This means every 3D transform is immediately flattened into its parent.

Surprisingly, the documentation suggests that you can work around this problem by taking the parent element's 3D transform and applying it to child elements. This "workaround" is so impractical it shows how little the IE10 team understands 3D.

Consider the steps you'd have to take to use this "workaround":

1. Detect every change to parentElement's transform
2. Walk the heirarchy and find every childElement which has a 3D transform set
3. Map parentElement's 3D transform-origin into the 3D space described by childElement's transform-origin.
4. Compute the dot-product of childElement's current transform and the updated parentElement transform.
5. Do all of that recursively for children of childElement, etc.
   

At the end, you've done all your 3D rotations by hand in javascript. Good luck with performance. Oh, and none of this will work with CSS transitions, so you'll have to do those by hand as well.

Even if you managed to get it working, you've now "scrambled" all your 3D transforms together. What if you want to do something as simple as rotating a child element on its Y axis? It no longer has a distinct transform you can manipulate. Instead it's got a dot-product of its own transform and all its parent elements (adjusted for their origins).

Good luck with that.

Answer 5

Thanks Daryl for your point of view. I did think it was harder for some reason. I know a little about computer programming but I can tell you these 3D transitions look cool and I'm sure people will start using more of them in their website designs in the future. I am amazed IE doesn't make it as easy as possible. Google and Apple really are the forward thinkers in this respect.  

---

Answer 6

It's incredible they can't code it ...
today (26 jan 2013) the transform-style: preserve-3d isn't implemented...
and you posted your reply in Aug 2012

MS do you need help programming this feature?