Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to use calc() inside another function

How to use calc() inside another function

Problem

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/

Problem courtesy of: cmplieger

Solution

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

Solution courtesy of: joshnh

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to use calc() inside another function

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×