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
Rich Knoll
50 PointsAdding Depth to rotate3d
Hello, I am attempting to create the menu slide out effect that is used here - http://lab.hakim.se/meny/. I've got everything working fine with the only problem being that my rotation lacks depth. I would like the height of the right side of the main content to become narrow as in the example. As I have it right now, the rotation occurs just fine, but the height on the right of the main content is the same as that on the left, creating no illusion of depth. Any ideas?
2 Answers
Andrew Stelmach
12,583 PointsTake a look at what I've made here: http://codepen.io/andrew_stelmach/pen/MYGyQq/?editors=110 (scroll down to the transform div - the other stuff is just a colour scheme from a project of mine)
You can play around with the code as much as you like - it's impossible for you to permanently affect the code (because you won't be able to 'save' it).
Creating the 3D transform is pretty straightforward. What is a little more tricky is the colouring. In your link, they have applied a gradient and an overall darkening to the div.
All I did was to make the background div a dark grey colour and make the transform div slightly transparent (to give the darkening effect), and applied a gradient to the background colour of the transform div.
However, this isn't 100% successful. To really make it 100% successful I reckon the way to do it would be to place a transparent div over the top of the transform div and then, on hover, make it partially opaque (by adjust its 'opacity' property), and giving it a gradient background.
That way, everything underneath it would be affected. In my version, the <h1> element isn't affected by the gradient fill, so the text looks a bit unnatural when a strong gradient is used.
The gradient also isn't transitioning properly, maybe I'll look into this.
Hope that helps, I had fun with it.
Robert Richey
Courses Plus Student 16,352 PointsHi Rich,
That is super neat! Pending a better answer, perhaps this CSS-Tricks perspective article can guide you in the right direction.
Cheers
Rich Knoll
50 PointsThanks for the input, Robert. I'm going to check it out now and I'll let you know if it solved my problem.
Andrew Stelmach
12,583 PointsYou might like to post up a little Codepen, too, Rich.
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsThat's great, I love interacting with CSS 3D demos like this.
Andrew Stelmach
12,583 PointsAndrew Stelmach
12,583 PointsI've found out that transitioning gradients isn't supported yet, so I've commented that out in the Codepen.
Here's some pointers for how to achieve a transitioned-gradient effect: http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds
It's similar to what I said before - set a containing div around the transform div, give the containing div a gradiented fill, and transition the opacity of the transform div. I reckon that would do it. Might have to give the containing div the same transform properties on-hover as the transform div.
Rich Knoll
50 PointsRich Knoll
50 PointsWow, thanks a lot Andrew. It looks great and is exactly the effect I was looking for. I need to spend a little time to disect the code and apply it to my own project, but it looks like this is going to help me out tremendously. I really appreciate the help!
Andrew Stelmach
12,583 PointsAndrew Stelmach
12,583 PointsThanks Rich, feels good to help someone out!
I think the sticking point will be getting the gradient effect; my explanation definitely isn't comprehensive enough, but google something like "css html color overlay" or "css html gradient overlay div", something like that, and you should find something useful.
Could be tricky, but not impossible! That part might be worth a separate post all of its own - "How to create a transitioned gradient effect". Good luck!