Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite
1

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/

Thanks for your ideas and feedback!

share|improve this question
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 3:55
yes but thanks for the effort :) – SnippetSpace Sep 14 '12 at 3:58

2 Answers

up vote 4 down vote accepted

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

share|improve this answer
doesn't work in IE10 either :(. I guess it is not yet a suitable solution... thanks for your answer :) – SnippetSpace Sep 14 '12 at 15:59
up vote 1 down vote

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.

share|improve this answer
1  
No go in latest opera and chrome – Musa Sep 14 '12 at 4:04
and IE10 doesn't work either... – SnippetSpace Sep 14 '12 at 15:59
@Musa Opera doesn't support calc() at all lol – SnippetSpace Sep 14 '12 at 16:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.