ThreeJS CSS3DRenderer / CSS Animation Issue - css

Question

i was looking for a way to display plain text ( 2d or 3d ) in a threeJS Scene , and apply some css effects to them , i looked around for a while and i came across this . probably what i wanted ..
now the problem is that when i aplly a animate.css ( well knows css animation library ) class to html element , the position of my CSS3D Object is reseted and fliped ( can't explain why )
'http://jsfiddle.net/kd9Tc/4/'
note :
-i think this code example illustrates pretty well what i am trying to do , apply css text effects in webGL Scene ( i need all the camera movement and tweening ) .
i tried THREE.TextGeometry first , but i wanted the text to be in a language other than english and converting the font properly let to nowhere ( displayd ' ?????? ' in all my tests ) and beside that , i've been using css transforms for a while now and i'm pretty comfortable with them , and working with them is much easier for me .
overall the main reason i'm using threeJS is camera movement capability .
i'm glad that i used threeJS beacuse it open's the door to many other features as well , but yet , i'm not sure i;m using ther right tool here :-?
thanks

Answer 1

When you apply a CSS transform on an element drawn by ThreeJS' CSS3DRenderer, it overrides an initial translation and rotation originally set by the renderer itself.
After looking at your fiddle and then looking at the CSS3DRenderer in GitHub I can assess that the renderer does some toying around with the CSS translation and rotation of the elements within, before drawing them, in order to show what you'd expect out of the box (versus what's logical taking into account the way TheeJS handles its coordinates).
Here are the specific lines which I'm referring to. (ThreeJS GitHub)
In order to apply CSS transforms effectively across CSS3DRenderer be sure to not override the translation and rotation transforms. Simply put, take the following into account as the relative origin to every transform:
translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg)
For example this:
-webkit-transform: none;
transform: none;
Would become this:
-webkit-transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
Here's a modified version of your fiddle which now works somewhat as expected.
(I didn't take the time to correct the X-axis translates, but you should get the gist of what I'm saying.)
Another way of working around this problem would be to somehow extend the CSS3DRenderer so that it corrects the rotate transforms on the fly instead of only at instantiation.
Why is the renderer doing this?
My best guess is that when the renderer was coded, they were expecting transforms to be applied via JavaScript and not CSS.
If you're truly more comfortable with CSS transforms I'd say go right ahead with what you are using. On the other hand if you feel a little more adventurous I'd suggest using TweenJS for animations with ThreeJS. They play quite well together. I use them on my website (link on my profile).
P.S.
#KianP Kudos on the fiddle you've put up. I can honestly say you are working on some pretty interesting stuff and you're using a set of tools that I wouldn't have thought of using together (Animate.css and ThreeJS) but seem to work quite well (Taking into account you correct the positioning as explained above).