3D shapes with CSS and GreenSock

[drNo77 2 Likes (Newbie)]

I'm trying to experiment with these 3D shapes I've created and using simple animations in GreenSock. I reckon I've made a good start, but I have a feeling this can be improved. For instance, while I was able to recreate the box (albeit one side doesn't seem visible with the rest of the box), I don't think I've gotten the hang of the circle. I can't really thicken the white fill colour without widening the gaps of the front and back blue sides.

 

I've noticed using the scale tween property distorts the shapes instead of rotating them, so I had to use the rotation tween property instead. Am I doing something wrong, or is that a real limitation when tweening transformed objects?

 

Any suggestions and advice would be greatly appreciated.

See the Pen poegxOG by DavidRizzo (@DavidRizzo) on CodePen

[Cassie 3,980 Likes (Superhero)]

Hey there!

This looks like a fun project. 

First things first: You're using old TweenLite syntax here -If you're starting out learning GSAP We definitely recommend that you learn and use GSAP 3.

This all looks good to me though! I'm not sure what you'd like help with?

in terms of the scale property - it makes shapes bigger or smaller (scales them) - it doesn't rotate them - so you're right to use rotate for this.

[drNo77 2 Likes (Newbie)]

Hi there, thanks for the response, I appreciate the confirmation about my decision to use rotation instead of scaling.

 

My only query - and I realise this might be more of a CSS issue rather than a GSAP one - is rendering the circle shape so the white fill has a bit of width. I want to make it similar to a coin, but at the moment, the div container holding the white fill colour is too thin.

[Cassie 3,980 Likes (Superhero)]

Yeah, that's a little out of scope for these forums but this article may help!

https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/

[HendersonSophie 0 Likes (Newbie)]

Thx for sharing!  Helpful article!!