How to use calc() inside another function

css transform css-calc
cmplieger picture cmplieger · Sep 14, 2012 · Viewed 19.6k times · Source

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/

Answer

joshnh picture joshnh · Sep 14, 2012

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

Related questions

Can I use Calc inside Transform:Scale function in CSS?

I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid …

Read More
CSS3 Continuous Rotate Animation (Just like a loading sundial)

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has …

Read More
Blurry text after using CSS transform: scale(); in Chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } If you visit http://…

Read More