明白なものがありませんか、またはfirefoxはcalc（）をtransform：skewY（）のように使用していませんか？firefoxでtransform（）とcalc（）を使用しています

問題
作品を変換し、次、問題はない

：

body article { 
    postion:relative; 
    top:50%; 
    transform-origin:left; 
    transform:skewY(-15deg) translateY(-50%); 
}

しかし（計算値を使用しようとは）ありません。予想通りクロム）（スキューをレンダリングするものの、任意の割合でFirefoxでない：

body article { 
    postion:relative; 
    top:50%; 
    transform-origin:left; 
    transform:skewY(calc(-1rad * 3.14/12)) translateY(-50%); 
}

私は通常、これはFirefoxが行っていない何かであることを前提としていますが、彼らの公式ドキュメントは言う：

calc（）CSS関数は、長さ、周波数、角度、時間、数値、または整数が必要な場所であればどこでも使用できます。

（ソース：https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility）

だから私は、障害が私であることを考えています。誰もが変換の構文で何か間違って見ることができますか？

次のようになりますCSSで

<html> 
    <body> 
     <article> 
      <header>title</header> 
      <div>article content</div> 
     </article 

     <!-- more articles... --> 

    </body> 
</html>

コンテキスト：

body { 
    white-space:nowrap; 
} 
body article { 
    display:inline-block; 
    width:200px; 
    height:400px; 
} 
body article header { 
    height:50px; 
} 
body article div { 
    height:calc(100% - 50px); 
}

私は何をしようとしていることは、水平ギャラリーの歪んだ要素を並べる正確です。

出典

2016-10-01 slartibartfast

@ t.nieseああ、それを知ってくれてありがとう、私はまるで愚か者だとは思わない。私は答えとしてそれを受け入れるだろう。 – slartibartfast

@マーティン遅く、素晴らしいダグラスアダムズ=） – slartibartfast

ありがとう。彼がノルウェーの賞を受賞したと聞きました。 ';-) ' – Martin

問題トラッカーにはBug 956573 - calc() CSS function doesn't work with all data types (units) that it should, such as times（2014年以降はまだ開いています）があります。

複数のユニットがコメント（電流源のままであるという事実所与今も支持されていることを更なるコメントが存在しないので（また、2014年から）1つのコメントは、コメント// calc() currently allows only lengths and percents inside it.

で切り取らコードを有します49.0.1）さらに制限がありますAnd note that in current implementation, number cannot be mixed with length and percent. Firefoxはまだ長さとパーセントしかサポートしていないと思います。

出典

2016-10-01 13:32:44

firefoxでtransform（）とcalc（）を使用しています

問題 作品を変換し、次、問題はない

次のようになりますCSSで

答えて

関連する問題

問題
作品を変換し、次、問題はない