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

Posted by Danny Bravo
.a{fill-rule:evenodd;}techdegree seal-36
Danny Bravo
Front End Web Development Techdegree Graduate 16,982 Points

My Solution! The code in this video doesn't seem to work as it should.

I noticed that even though I was following the steps exactly, my code was behaving differently than how it was for Guil in the video. I saw that others were also having issues with this, and tried using the solutions that worked for them, but none of them worked for me. So just in case anyone else has this issue in the future, I wanted to post my solution for the problem.

This was the only way I was able to get my code to behave exactly as it did in the video. This works in Chrome and Firefox

.content {
  perspective: 700px;
}

.photo-container {
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}

.photo {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.photo-container:hover {
  transform: rotateY(-180deg);
}

.side-b {
  transform: rotateY(180deg);
}

My backface-visibility property was the first thing that was giving me issues, and any attempts I made to try to solve it led to it not working correctly later on. So I figured that maybe applying the flipping transition to the entire container would work better, and it did. To be honest, the backface-visibility property in the code I posted isn't even really needed here for the code to work correctly, but I left it in because it still works as it's meant to I guess. It does hide the backsides of the photo and div.

Anyway, I hope this helps anyone that encounters the issues that I did.