Применение преобразований CSS3 на основе ширины и высоты окна

Question

Мое веб-приложение использует некоторые преобразования css3, и мне было интересно, как лучше всего это сделать, основываясь на ширине и высоте окна. Мой css выполняет несколько преобразований и в определенной последовательности, т.е. тело выполняет одно, а элемент в теле выполняет секунду после преобразования, которое выполняло тело. Однако одно из моих преобразований жестко закодировано, чтобы переместить пиксели элемента X, которые я хочу сделать динамическими, исходя из высоты и ширины окна.

Есть ли способ без javascript (мне нужно было бы сохранить порядок этих преобразований), чтобы сказать что-то вроде:

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

Answer 1

transform: translate не может быть вашей лучшей ставкой. Я бы попробовал position: fixed и использовал бы процентное значение окна:

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

Answer 2

Можно использовать единицы измерения на основе области просмотра. Например:

transform: translate(50vw, 50vh);