Css Firefox变换：旋转打断文本颜色

我已经构建了以下CSS（来自各种来源）来创建一个Post-it便笺，并在LayerSlider横幅动画中使用它。如果未旋转，它可以正常工作，但当添加“transform:rotate（5deg）；”选项时，它会丢失文本颜色或从白色闪烁以在Firefox中设置颜色。我尝试了网上列出的一些建议解决方案，但没有成功。在大多数其他浏览器中100%工作

.orange {
text-align:center;
width: 350px;
margin: 15px;
min-height:175px;
max-height:175px;
padding-top:15px;
position:relative;
border:1px solid #FFDC73;
font-family:'Handlee';
font-size:22px;
border-bottom-right-radius: 60px 5px;
display:inline-block;
box-shadow: 16px 21px 21px 0px rgba(0,0,0,0.75);
background: #FFCD5A; /* Old browsers */
background: -moz-linear-gradient(-45deg, #FFCD5A 81%, #FFCD5A 82%, #FFCD5A
82%, #ffebc0 100%);
background: -webkit-gradient(linear, left top, right bottom, 
color-stop(81%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(82%,#FFCD5A),
color-stop(100%,#ffebc0)); 
background: -webkit-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: -o-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: -ms-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: linear-gradient(135deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#FFCD5A', endColorstr='#ffebc0',GradientType=1 ); 
}

我用这个来旋转音符：

-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

---

添加“translateZ（0）”之类的内容并不能改善重新设置的效果，我将CSS样式分为两部分，一部分用于注释（所有颜色通用的样式），另一部分用于注释的颜色选项，从而解决了这个问题。LayerSlider中的后续幻灯片现在不会丢失其文本颜色。 在我的第一次尝试中，Firefox中的“可用时使用硬件加速”选项也会影响这种行为

.note {
            text-align:center;
            width: 350px;
            margin: 15px;
            min-height:175px;
            max-height:175px;
            padding-top:15px;
            position:relative;
            font-family:'Handlee';
            color: #131304;
            font-size:22px;
            border-bottom-right-radius: 60px 5px;
            display:inline-block;
            box-shadow: 16px 21px 21px 0px rgba(0,0,0,0.75);
            -webkit-transform: translateZ(0) rotate(5deg);
            -moz-transform: translateZ(0) rotate(5deg);
            -o-transform: translateZ(0) rotate(5deg);
            -ms-transform: translateZ(0) rotate(5deg);
            transform: translateZ(0) rotate(5deg);
        }

.orange {
            border:1px solid #FFDB8D;
            background: #FFCD5A; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #FFCD5A 81%, #FFCD5A 82%, #FFCD5A 82%, #ffebc0 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(100%,#ffebc0)); 
            background: -webkit-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            background: -o-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            background: -ms-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); /* IE10+ */
            background: linear-gradient(135deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCD5A', endColorstr='#ffebc0',GradientType=1 ); 

        }