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:
Is it possible to use calc() inside of a CSS function like transform or
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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:
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