Using CSS3 transforms and calc() in Internet Explorer

Although CSS calc sizes are supported in Internet Explorer 10 and above, they do not work when used in transform attributes. For instance, transform: translate(0, calc(100% - 10px)); does not work in Internet Explorer.

To work around this, you can chain transforms. For instance, the following statements are equivalent:

transform: translate(0, calc(100% - 10px)); //Does not work in IE
transform: translate(0, 100%) translate(0, -10px); //Works in IE

It’s that simple!

3 comments on “Using CSS3 transforms and calc() in Internet Explorer

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see