Why not work backface-visibility:hidden?

July 9th 19 at 12:59
2 answers
July 9th 19 at 13:01
Solution
Everything works.
Just there on hover the z-index changes.... and you do not have it.
body {
background-color: #18A6A8;
}
.front{
background: hsl(120, 100%, 25%);
z-index:10;
animation: example 5s infinite linear;
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...');
} - nannie72 commented on July 9th 19 at 13:04
z-index add tried - nothing changes. front 10 put, on back also tried. - beatrice_Hamill1 commented on July 9th 19 at 13:07
: Above working css - nannie72 commented on July 9th 19 at 13:10
: the z-index of keyframes is not important..
And if you remove the background, it would be a strange picture. On the one hand normal, and on the other we see all of two text. - beatrice_Hamill1 commented on July 9th 19 at 13:13
In the example, too, if you remove the background you can see the reverse side))))) - nannie72 commented on July 9th 19 at 13:16
:
in the above code change and will work without a background

@keyframes example1 {
0% {transform: rotateY(180deg);backface-visibility:hidden;}
50% {transform: rotateY(0deg);backface-visibility:visible;}
100% {transform: rotateY(180deg);backface-visibility:hidden;}
} - nannie72 commented on July 9th 19 at 13:19
July 9th 19 at 13:03
as time is running. try clean . and what you want to achieve in the end ?
On codepen works?
On the reverse side must be written Back, and there tnorF. - nannie72 commented on July 9th 19 at 13:06
move this property and will be back - beatrice_Hamill1 commented on July 9th 19 at 13:09
: So Front and should not be seen on the reverse side. The second link looked? - nannie72 commented on July 9th 19 at 13:12

Find more questions by tags LayoutCSS