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
Matt Campbell
9,767 PointsRotate images through y-axis like in Nick's surfing site.
Hey guys,
So I'm feeling a little creative, never a good thing...I lose so many hours to creativity!
What I'm trying to do is replicate something I saw in one of Nick's videos. In the multiple backgrounds project, Nick used an image that had been rotated and had shadows and reflections etc added.
The shadow and reflection is not a problem, I can do that ok. I can even rotate images this way and that but, I do not have the competency to be able to work out the amounts of rotation in what directions to yield the desired result.
Rather then tear my hair out trying to find the perfect mix, I was hoping someone may be able to impart me the knowledge, maybe Mr Pettit himself could share his wisdom!!!
Thanks. :)
2 Answers
Matt Campbell
9,767 PointsI've messed about for a couple of hours. Remembered something Nick did in a video, found it and have my images transform around an axis to look 3d using perspective etc.
Next problem I have is this.
I would like two columns on the page. one left, one right.
Each column will have 3d rotated images. About 45 degrees.
The problem I'm running into is that, because of the perspective I imagine, I can not for the life of me get the right column to mirror the left. I've tried making two divs and assigning equal opposite perspective values to each(1000 left, -1000 right), but that doesn't. Subtracting 90 degrees or mirroring values but negative doesn't work.
Anyone got any tips on how to do this if it is possible? I can see I'm just going to have sit here and work it out trial and error style and used a fixed width site because screen position, thus differing resolutions, seem to effect it.
Matt Campbell
9,767 PointsIt's all about perspective-origin kids! :) Thanks to css-tricks.com for their fantastic almanac