CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Shuming Li
PRO
Shuming Li
Pro Student 3,592 Points

The backface-visibility property is not working.

.content { perspective: 700px; }

.photo { transition: transform 1s ease-out; transform-style: perserve-3d; }

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

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

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

4 Answers

Steven Parker
Steven Parker
195,784 Points

It's just a typo. You have "perserve-3d" instead of "preserve-3d".

The "backface-visibility" property only works when ""preserve-3d" is set.

Shuming Li
Shuming Li
Pro Student 3,592 Points

It still doesn't work after I corrected it.


.content { perspective: 700px; }

.photo { transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2); transform-style: preserve-3d; }

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

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

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



Steven Parker
Steven Parker
195,784 Points

You apparently made other changes while applying the fix. The new code has a space between "rotateY" and the argument in parentheses that follows it, which causes the ".photo:hover" rule to be ignored.

Tomasz Denkiewicz
Tomasz Denkiewicz
11,742 Points

I had the same problem. You'll have to add property transform-style: preserve-3d to .side-a, side-b

.content {
  perspective: 700px;
}

.photo {
  transition: transform 1s ease-in-out ;
  transform-style: preserve-3d;

}

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

.side-a,
.side-b {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

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

/* it works on my machine ¯\_(ツ)_/¯ */
Gari Merrifield
Gari Merrifield
9,554 Points

You also need to add "transform-style: preserve-3d;" on the ".photo-container" if this problem is while using Firefox.

Jon Legler
Jon Legler
6,162 Points

My backface-visibility isn't working as well

.content{ perspective:700px; } .photo{ transition: transform 1s ease-out; transform-style: preserve-3d; } .photo:hover{ transform: rotatey(-180deg); }

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

I have tried a variety of fixes from the forums and nothing seems to work.

Steven Parker
Steven Parker
195,784 Points

The transform name "rotateY" needs a capital "Y".