How to use calc() inside another function

Question

Is it possible to use calc() inside of a CSS function like transform or translate? I cannot seem to get it working. Here is a demo so you guys can play around:

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

I don't think translations take percentages. It does work if you use pixels instead of percent but I guess that would defeat the purpose. — Musa, Sep 14 '12 at 03:55

joshnh · Accepted Answer · 2012-09-18T05:27:20.757

11

You can use calc() wherever you can use a length based value in CSS. The example you have provided does work, but actually adds up to 0. Here is a slightly changed demo to illustrate: http://jsfiddle.net/joshnh/6ydR3/

Also, make sure to list the unprefixed version last.

Mixing percentages with other value types in the calc() function within a transform doesn't seem to work at all in Chrome. I'll report this as a bug.

UPDATE: This has been reported as a bug here: https://code.google.com/p/chromium/issues/detail?id=150054

edited Sep 18 '12 at 05:27

answered Sep 14 '12 at 04:19

joshnh

8,374
4
35
53

doesn't work in IE10 either :(. I guess it is not yet a suitable solution... thanks for your answer :) – cmplieger Sep 14 '12 at 15:59

score 2 · Answer 2 · answered Sep 14 '12 at 03:58

2

It works: http://jsfiddle.net/qdJwY/2/

(edit: Tested in Firefox only)

In your example it just so happens that 100% = 200px, so you translated by zero.

answered Sep 14 '12 at 03:58

user123444555621

148,182
27
114
126

2

No go in latest opera and chrome – Musa Sep 14 '12 at 04:04

How to use calc() inside another function

2 Answers2

Linked