Question

My web application is using some of the css3 transformations and I was wondering the best way to do these based on the window’s width and height. My css is doing multiple transformations and in a specific sequence, i.e the body does one, and an element on the body does a second after the transformation the body did. However, one of my transformations is hardcoded to move the element X pixels which I want to make dynamic based off the window’s height and width.

Is there a way without javascript (I’d need to preserve the order of these transformations) to say something like:

.someClass {
    transform:translate(windowHeight /2, windowHeight);
}

Answer 1

transform: translate may not be your best bet. I’d try position: fixed and use a window percentage value:

position: fixed;
top: 50%;
left: 50%;