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 CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Miguel Sosa
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Miguel Sosa
Front End Web Development Techdegree Graduate 24,185 Points
Posted by Miguel Sosa
.a{fill-rule:evenodd;}techdegree seal-36
Miguel Sosa
Front End Web Development Techdegree Graduate 24,185 Points

The animation works but I can't click the button

Hello devs! I tried making this animation by myself and it worked, however, when I hover over the card and click the button nothing happens, I know it's linked to "#" but it doesn't show on the browser url either, I doesn't even have the color change effect on hover and it's unselectable through the "Select to inspect" function on the chrome dev tools. I didn't find any related question so I asked it myself.

Here is the snapshot: https://w.trhou.se/754j6yphiu I edited only the interactions.css file:

.content {
  perspective: 700px;
}

.photo {
  transition: transform .5s ease-in-out;
}

.photo:hover {
  transform: rotateX(180deg);
}

.side-a, .side-b, .photo {
  transform-style: preserve-3d;
}

.side-a {
  backface-visibility: hidden;
}

.side-b {
  transform: rotateX(180deg);
}
Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Nothing shown here would indicate a "button". To allow us to replicate your issue, share all the code (formatted for markdown) or make a snapshot of your workspace and post the link to it here.

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I can fix it but I can't explain it. First, be sure the backface is hidden on both sides (as is done in the video). But then, start side B with a negative 180 degree turn:

.side-a, .side-b {
  backface-visibility: hidden;
}

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

To further the mystery, if you add hover effects to the h3's and paragraphs, you'll notice they only work on the bottom half of the cards. With the original setting (180 positive), the hover effects only work on the top half of the cards.

This may be a clue, but I"m not sure if to something I'm missing or just the inner workings of a browser bug.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

After more research, I can explain it. It's a tiny precision error in calculating the final angle. With the original values, the "flipped" position is just a tiny amount top-forward, so the bottom half of side b is very slightly behind side a. And with the negative original value, it winds up a tiny amount bottom-forward.

In both cases, the invisible backside blocks the hover on the half that's slightly behind it.

I discovered this by clicking "inspect" on the top and bottom halves, which opens the dev tools and highlights either side-a or side-b.

So another fix is to do this:

.side-b {
  transform: rotateX(180deg) translateZ(0.1px);
}

This tiny offset is enough to guarantee that both halves are on top.