web-dev-qa-db-ja.com

別の関数内でcalc()を使用する方法

transformtranslateのようなCSS関数内でcalc()を使用することは可能ですか?私はそれを動かすことができないようです。これがデモなので、みんなで遊ぶことができます:

http://jsfiddle.net/qdJwY/1/

15
cmplieger

CSSで長さベースの値を使用できる場合は、どこでもcalc()を使用できます。あなたが提供した例は機能しますが、実際には0になります。これは説明のために少し変更されたデモです: http://jsfiddle.net/joshnh/6ydR3/

また、接頭辞のないバージョンを最後にリストするようにしてください。

変換内のcalc()関数でパーセンテージを他の値型と混合することは、Chromeではまったく機能しないようです。これをバグとして報告します。

更新:これはここでバグとして報告されています: https://code.google.com/p/chromium/issues/detail?id=150054

9
joshnh

それは動作します: http://jsfiddle.net/qdJwY/2/

(編集:Firefoxでのみテスト済み)

あなたの例では、100% = 200pxなので、ゼロで翻訳しました。

2