CSS transform property with calc

Question

I want to make a calculation for the transform property. Is it possible to use the calc feature for that?

Something like:

 width: calc(100vw-2vw);

but for transform

 transform: translate(calc(100vw-2vw));

(Of course the above is not functional)

Thanks. I hadn't see that before. Here is something useful for other people who will see my duplicate post [link](https://code.google.com/p/chromium/issues/detail?id=150054) — Bill, Feb 19 '15 at 19:37
@Vinc199789 I tried but it is not working. You can see the above link. — Bill, Feb 19 '15 at 19:39
@BillysGtr okay. Nothing is animation but I get the div chaged position. What I did is I removed the prefixes for the calc. (Do not remove them for the transform. they need prefixes). Here is the fiddle: http://jsfiddle.net/ZJUEv/11/. You can also take a look at this site:https://developer.mozilla.org/en-US/docs/Web/CSS/calc . If this work say it and I will post this a a anwser so than can you close the question — Vinc199789, Feb 19 '15 at 19:44
Thanks @Vinc199789. I read the link from mozilla and _GCyrillus_ gave me a great answer. Your comment is helpful too. It says that: The + and - operators must always be surrounded by whitespace. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended. — Bill, Feb 19 '15 at 21:10

score 3 · Accepted Answer · answered Feb 19 '15 at 19:50

3

It works if you respect a white space in between calc values and signed used : transform: translate(calc(100vw - 2vw));

div {
  border:solid;
  float:right;
  height:20vw;
  width:20vw;
  transform:translate( calc(-100vw + 25vw) );
}

<div><p>Do not forget !<br/>use prefix if needed !!!</p><p>BTW, i float right</p></div>

answered Feb 19 '15 at 19:50

G-Cyrillus

Wow...super answer!! Thanks! Wired that thing with the white space! – Bill Feb 19 '15 at 21:03

1 Answers1