Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Transitions and Transforms 3D Transforms: Part 1

Dean Onizuka
Dean Onizuka
4,753 Points
Posted by Dean Onizuka
Dean Onizuka
4,753 Points

are these transforms (2d and 3d) practical?

cant think of too many websites off the top of my head that use these kinds of transforms. seems to me like its something thats good to know in the rare instance you need to use it but its not something that is gonna be used nearly every time... or am i wrong?

2 Answers

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

Hi Dean,

I just watched that module and had the same question myself. I think, used very conservatively, there's a place for 2D and 3D transforms. I tried to find a real-life example from a Google website where there were "tiles" that, when the user moused over them, subtly changed, like a card being tilted.

Though I couldn't find that specific use-case, I did find this:

http://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954

I think it's a bit ahead of it's time, but this may be the future of web design, and also a way for overly stylistic developers to add plenty of distraction to the end-user. I do plan to use these transforms in later projects, just to challenge myself, but only if it adds some value to the website without distracting.

Hope this helps,

Tyler

Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

i assume it would slow down the load time of the web page? and i am also not sure how they would work on a mobile browser... if at all

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

I don't think it would noticeably slow down the load times, as transforms rely on the end-user's GPU to process their effects. In terms of mobile browsing, you're probably right, as there is no way for a :hover pseudo class to work, which I would assume to be 90% of all use-cases using CSS transforms.

If you check out the first demo in that link, you'll see a really awesome-looking 3D cloud effect, like you're moving through space. I just tested it on my iPhone 5c and it worked, though a bit choppy as I don't have the latest and greatest iPhone just yet. This isn't a matter of load-time... it's a matter of a somewhat date mobile GPU.

Dean Onizuka
Dean Onizuka
4,753 Points
Dean Onizuka
Dean Onizuka
4,753 Points

an online portfolio could also benefit from 3d effects. its probably the first place i'll put these to use lol. thanks for your input btw

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

That's a VERY good point. Show off your web design chops to get more customers. :)