ヘッドラインの背後にある擬似要素のスタック（ボックスシャドウの代替）

Question

私は以下の問題を抱えています。背景とボックスシャドウの見出しが必要です。さて、Firefoxは、魅力のように変換の回転をレンダリングしていないので、私は代替を探しています。見出しの後ろの要素の後に擬似スタックされていないのはなぜ

h2 { 
    padding: 1rem 2rem; 
    display: inline-block; 
    color: #FFF; 
    background-color: #006AB3; 
    transform: translateZ(1px) rotate(-3deg); 
    transform-origin: 50% 50%; 
    margin-bottom: rem-calc(50px); 
    outline: 1px solid transparent; 
    z-index:1; 
    &:after{ 
      content: ""; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      background: rgba(0,0,0,.3); 
      right:-10px; 
      bottom:-10px; 
      outline: 1px solid transparent; 
      z-index: -1; 
     } 
} 

https://jsfiddle.net/gw64ove4/

？回転要素にボックスシャドーを使用する場合、アンチエイリアシングの他の回避策はありますか？ H2タグにスパンを追加

おかげ

Answer 1

試してみてください。このようなスパンのため

<h2> 
<span>TEXT</span> 
</h2> 

とCSS：

span {display: block; position: relative; z-index: 10;} 

https://jsfiddle.net/zLna2xLa/

また、あなたはを使用して試すことができます - moz-接頭辞

EG ::

-moz-transform: translateZ(1px) rotate(-3deg); 
    -moz-transform-origin: 50% 50%;