Trying to rotate 2 cards, one containing an icon and the other a value The HAML snippet for this is:
.card
.side.back
%span.txt {{ notifications.length }}
.side
%i.material-icons.small_icon remove_red_eye
This setup works perfectly in Chrome/Chromium and Opera, however, in Mozilla Firefox, the eye icon appears together with the data value. To address compatibility with Mozilla, my CSS snippet includes:
.card{
-moz-animation-name: spin;
-moz-animation-duration: 2500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
@-moz-keyframes spin{
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(360deg); }
}
Any suggestions on how to resolve this issue?
.card .side {
backface-visibility: hidden;
border: none;
background: #fafafa;
border-radius: 0px;
height: 100%;
width: 100%;
}
.card .back {
font-size: x-small!important;
transform: rotateY(180deg);
}
.card {
transform-style: preserve-3d;
height: 100%;
position: absolute;
width: 100%;
animation: spin 2500ms linear infinite;
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
.small_icon {
font-size: x-small!important;
}
.badge1 {
position: absolute;
top: 7px;
left: 100px;
}<div class="badge1">
<div class="card-container badge1"></div>
<div class="card">
<div class="side back">
<span class="txt">10</span>
</div>
<div class="side">
<i class="material-icons small_icon">remove_red_eye</i>
</div>
</div>
</div>