Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
По мере приближения к концу алфавита и концу первого сезона CSS AtoZ не так много свойств, значений или концепций, начинающихся с буквы X.
Однако существует ряд значений transform
В этом эпизоде мы узнаем все о:
- Свойство CSS
transform - Перемещение элементов с помощью
translatetranslateX - Преимущества производительности при использовании
translate
transform
Свойство transformposition:relative
Элементы могут быть переведены, повернуты, масштабированы или наклонены по-разному на разных осях.
Свойство transform
-
matrix() -
matrix3d() -
translate() -
translateX() -
translateY() -
translateZ() -
translate3d() -
scale() -
scaleX() -
scaleY() -
scaleZ() -
scale3d() -
skew() -
skewX() -
skewY() -
rotate() -
rotateX() -
rotateY() -
rotateZ() -
rotate3d() -
perspective()
Здесь длинный список, и, если честно, я использую лишь небольшой выбор из них в повседневных проектах. Полезно знать другие варианты, но я чаще всего использую:
-
translate() -
rotate() -
scale() - и
skew()
Также возможно объединить несколько значений transform
.some-class {
transform: scaleX(2) rotate(10deg);
}
Это удвоит горизонтальную шкалу элемента и повернет его на 10 градусов по часовой стрелке.
translate
Значение translate
У меня есть изображение с несколькими параграфами выше и ниже.
Функция translate Если передаются два значения, первое указывает перевод по оси X, второе — по оси Y.
img {
transform: translate(10px,60px);
}
Значения могут быть любой допустимой длины, доступной в CSS. Это может быть pxemrem%
Если предоставляется только одно значение, второе значение считается равным нулю, и, следовательно, перемещение по оси y не происходит.
Используя translateX Если бы я хотел использовать только одноосное движение, я бы предпочел translateX
Производительность
При анимации элементов есть преимущества для анимации свойства transformmargintopleft
При анимации элементов с transformграфический процессор (GPU), а не в CPU. Конечным результатом этого является то, что анимации более плавные, и они оказывают меньшее влияние на воспринимаемую отзывчивость и срок службы батареи.
Чтобы получить подробный и технический скринкаст, в котором наглядно представлены эти преимущества, посмотрите это видео от Пола Айриша под названием «Почему перемещение элементов с помощью Translate () лучше, чем Pos: abs сверху / слева» .
Я обнаружил, что это было первым делом, когда я делал анимацию для AtoZ CSS — для начала я анимировал свойство margin-left Переход к анимации контейнера с translate