Почему не работает backface-visibility:hidden?

Question

[DTX]

codepen.io/DTX/pen/QNRoKw

Пытаюсь повторить
https://css-tricks.com/almanac/properties/b/backfa...
но что-то не выходит

Answer 1

[Alex]

Все работает.
Просто там на hover z-index меняется.... а у вас его вообще нет.

Comments

[Alex]

body {
background-color: #18A6A8;
}
.front{
background: hsl(120, 100%, 25%);
z-index:10;
animation: example 5s linear infinite;
backface-visibility:hidden
}
.back{
background: hsl(120, 50%, 25%);
animation: example1 5s linear infinite;
}
.card {

position: relative;
font-family: pfs-bold;
font-size: 40px;
height: 4em;
text-align: center;
width: 10em;
margin: 2em auto;
//background-color: whitesmoke;

& > div {
position: absolute;

top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
line-height: 4em;
text-align: center;
}

}

@keyframes example {
0% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg); z-index:0;}
100% {transform: rotateY(0deg);}
}

@keyframes example1 {
0% {transform: rotateY(180deg);}
50% {transform: rotateY(0deg);}
100% {transform: rotateY(180deg);}
}
@font-face {
font-family: pfs-bold;
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14299...');
}

[DTX]

z-index добавлять пробовал - ничего не меняется. front'у 10 ставил, на back тоже пробовал.

[Alex]

DTX: Выше работающий css

[DTX]

Alex: z-index в keyframes роли не играет..
И если убрать background, то будет странная картина. С одной стороны нормально, а с другой видно все два текста.

[Alex]

DTX: В примере тоже если убрать фон то видно обратную сторону)))))

[Alex]

DTX:
в коде выше поменять и работать будет без фона

@keyframes example1 {
0% {transform: rotateY(180deg);backface-visibility:hidden;}
50% {transform: rotateY(0deg);backface-visibility:visible;}
100% {transform: rotateY(180deg);backface-visibility:hidden;}
}

Answer 2

[devstudent]

как раз -таки работает. попробуйте уберите . а чего вы хотите добиться в итоге ?

Comments

[DTX]

На codepen работает?
На обратной стороне должно быть Back написано, а там tnorF.

[devstudent]

DTX: уберите это свойство и появится back

[DTX]

devstudent: Так Front'а не должно быть видно на обратной стороне. Второй линк смотрели?