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); }

2 Answers

Steven Parker
Steven Parker
172,268 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
172,268 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.

Gari Merrifield
Gari Merrifield
9,549 Points

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