Position vs translate

[DivMan]

Заменит ли когда-нибудь transform: rotate на position?

[psywalker]

Заменит ли когда-нибудь transform: rotate на position?

Простите, что?

[Int]

position вообще не отвечает за поворот элементов. Если ты имел в виду translate, то его можно сравнить разве что с relative, но не со всем position

[DivMan]

ой ошибся, Заменит ли когда-нибудь transform: translate на position?

 

Ведь это почти одно и тоже

 

Спецификация говорит:

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning.

[antonKar]

http://jsfiddle.net/qbgrszhd/

 

Такой ответ вас устроит?

[Sensei]

Разница есть, как минимум, когда вы задаете сдвиг в процентах.

При позиционировании проценты берутся от размеров родителя (относительно которого позиционируется),

при трансформации от размеров самого элемента.

 

http://jsfiddle.net/k7q7fu1x/

[psywalker]

ой ошибся, Заменит ли когда-нибудь transform: translate на position?

 

Ведь это почти одно и тоже

 

Спецификация говорит:

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning.

На самом деле эти вещи только визуально похожи, но имеют очень важное отличие. Дело в том, что преобразуемый элемент (т.е. transform: translate), в отличие от относительно позиционированного элемента, сохраняет свою позицию. Перемещение только видимое --  преобразуется только изображение элемента, но не сам элемент.

 

В подтверждение моих слов я немного изменил вышеприведённый пример. Вот смотрите. Кликните на один и другой элемент, а алерт вернёт вам координаты каждого из них. Как вы можете видеть, преобразуемый элемент сместился только лишь визуально, но по факту он остался на месте.

[Sensei]

А при анимациях и переходах тоже специальный слой рисуется?

[psywalker]

А при анимациях и переходах тоже специальный слой рисуется?

Эм... немножко некорректный вопрос. Дело в том, что анимация и переходы работают с теми же свойствами (напр. relative; transform и т.д.), поэтому соответственно, что если мы будет анимировать relative, то будет простое смещение элемента, а если будем анимировать transform, то снова получим только видимое перемещение. Это легко можно проверить.