CODEWITHSUNDEEP
javascriptcsstransformation
OnResolve
OnResolve

Reputation: 4032

Applying CSS3 Transformations based on Window Width and Height

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);
}

Upvotes: 4

Views: 1968

Answers (2)

Yacine Zalouani
Yacine Zalouani

Reputation: 8189

One can use viewport based units. For instance:

transform: translate(50vw, 50vh);

Upvotes: 1

Erik Nielsen
Erik Nielsen

Reputation: 36

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%;

Upvotes: 1

Related Questions