Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Danny Bravo
seal-mask
.a{fill-rule:evenodd;}techdegree
Danny Bravo
Front End Web Development Techdegree Student 5,743 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.