Transform translate3d не работает

Свойство CSS translate () не работает: активный селектор

Итак, у меня есть это крутое маленькое круговое меню, которое появляется из ниоткуда, когда вы нажимаете FAB. Потребовалось много анимации, проб и ошибок, тем более, что я новичок, но в итоге все заработало так, как я хотел. Однако недавно я понял, что преобразование (3px, 3px), которое я добавил к одному из моих: active свойств, не работает. Меня это довольно озадачивает, так как точно такая же анимация была добавлена в FAB, и там она отлично работает. Вы можете увидеть все это в действии здесь: (https://codepen.io/BGGrieco / pen / EmzRLw? editors = 0100), я закомментировал теневую анимацию, которая работает, чтобы привлечь внимание к тому факту, что перевода (3px, 3px) не происходит.
Соответствующий код того, что работает, а что нет:

^ Nada, nej, niet, zilch ^

Я молю интернет-богов, чтобы я не дурак (снова), полностью забыв где-нибудь запятую или точку с запятой.

2 ответа

Преобразование: перевод не работает с элементом, потому что для элемента установлен другой, встроенный стиль преобразования, а встроенные стили (обычно) имеют приоритет над стилями, определенными в CSS. Взгляните на Chrome Inspector:

Похоже, вы устанавливаете это в Javascript. Помните, что все свойства преобразования действуют как одно, поэтому, если вам нужно несколько преобразований, таких как масштабирование и перевод, он становится:

Вы не сможете переопределить свойство преобразования с помощью вашего текущего Javascript, я бы также рекомендовал установить масштаб в CSS.

Хай Брайан, к сожалению, я понятия не имею, почему это не работает должным образом, решение может использовать margin-top: 3px; margin-left: 3px; ? он работает в вашем коде. Я не знаю, достаточно ли этого для вас, дайте мне знать, если хотите, чтобы я копал глубже; p

Источник

2.25. CSS3 3D-трансформации

Модуль 3D Transforms расширяет спецификацию CSS 2D Transforms, позволяя преобразовывать элементы в трехмерном пространстве. Новые функции преобразования для свойства transform выполняют трехмерные преобразования, расширяя координатное пространство до трех измерений, добавляя ось Z, перпендикулярную плоскости экрана, которая увеличивается по направлению к зрителю, а дополнительные свойства позволяют контролировать взаимодействие вложенных трехмерных преобразованных элементов.

Хотя некоторые значения свойства transform позволяют преобразовывать элемент в трехмерной системе координат, сами элементы не являются трехмерными объектами. Они существуют в двумерной плоскости (плоская поверхность) и не имеют глубины.

CSS3 3D-трансформации элементов

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 10. -moz-
Chrome: 36.0, 12.0 -webkit-
Safari: 4.0 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

1. Свойство transform-style

По умолчанию преобразованные элементы создают плоское представление своего содержимого. Свойство transform-style позволяет преобразованным 3D-элементам и их 3D-потомкам использовать общее трехмерное пространство, выстраивая иерархии трехмерных объектов. Отображение 3D-потомков определяется моделью — так называемым контекстом 3D-рендеринга. Отображение зависит от z-позиции элементов в трехмерном пространстве, и если 3D-преобразования этих элементов вызывают пересечение, то они отображаются с пересечением.

Свойство устанавливается для родительского элемента.

Свойство не наследуется.

transform-style
Значения:
flat	Значение по умолчанию. Все дочерние элементы отображаются плоскими в двумерной плоскости блока-контейнера.
preserve-3d	Располагает элементы в трехмерном пространстве.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Некоторые значения CSS-свойств элемента, для которого задано transform-style: preserve-3d , изменяют используемое значение на flat и предотвращают создание или расширение контекста 3D-рендеринга:

• overflow : любое значение, кроме visible или clip .
• opacity : любое значение меньше 1 .
• filter : любое значение, кроме none .
• clip : любое значение, кроме auto .
• clip-path : любое значение, кроме none .
• isolation : если задано значение isolate .
• mask-image : любое значение, кроме none .
• mask-border-source : любое значение, кроме none .
• mix-blend-mode : любое значение, кроме normal .

2. Свойство perspective

В нормальном потоке элементы отображаются плоскими и в той же плоскости, что и блок, содержащий их. Двумерные функции преобразования могут изменять внешний вид элемента, но этот элемент по-прежнему отображается в той же плоскости, что и содержащий его блок.

Свойства perspective и perspective-origin можно использовать для добавления ощущения глубины в сцену, делая элементы выше по оси Z (ближе к зрителю) и кажущимися большими, а те, которые находятся дальше — меньшими. Масштаб пропорционален d / (d — Z) , где d — значение перспективы, является расстоянием от плоскости рисования до предполагаемого положения глаза зрителя.

Рис. 1. Зависимость 3D-перспективы и положения элемента относительно оси Z

Если 3D-перспектива задается с помощью функции perspective() , 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним.

Свойство не наследуется.

perspective
Значения:
длина	Задает расстояние до центра проекции, т.е. расстояние по оси Z. Значение может быть любым положительным числом, заданным в единицах длины. Чем больше значение, тем менее выражен эффект. 0 означает отсутствие перспективы.
none	Значение по умолчанию. Означает отсутствие перспективы.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 2. Примеры разных значений 3D-перспективы

3. Свойство perspective-origin

Обычно предполагаемое положение глаза зрителя находится в центре рисунка. Свойство perspective-origin управляет точкой начала координат, позволяя изменять направление трансформации дочернего 3D-элемента. Свойство должно использоваться вместе со свойством perspective для родительского элемента и свойством transform для дочернего элемента.

Свойство не наследуется.

perspective-origin
Значения:
позиция точки	Свойство принимает два значения, первое задает координату X, второе — Y. Свойство может принимать следующие значения: % — для горизонтального смещения перспективы определяется относительно ширины виртуальной рамки, для вертикальное смещения — относительно высоты; значение, указанное в единицах длины задает фиксированную длину смещения. Значение смещения по горизонтали и вертикали представляет собой смещение от верхнего левого угла виртуальной рамки; top вычисляется в 0% для вертикального положения, если задано одно или два значения, в противном случае определяет верхний край как исходную точку для следующего смещения; right вычисляется в 100% для горизонтального положения, если задано одно или два значения, в противном случае указывает правый край в качестве исходной точки для следующего смещения; bottom вычисляется в 100% для вертикального положения, если задано одно или два значения, в противном случае указывает нижний край в качестве исходной точки для следующего смещения; left вычисляется в 0% для горизонтального положения, если задано одно или два значения, в противном случае определяет левый край в качестве исходной точки для следующего смещения; center вычисляется 50% ( left 50% ) для горизонтального положения, если горизонтальное положение не указано иначе, или 50% ( top 50% ) для вертикального положения, если оно есть. Значение по умолчанию 50% 50% .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 3. Примеры задания точки трансформации

4. Свойство backface-visibility

Используя трехмерные преобразования, можно преобразовать элемент так, чтобы его обратная сторона была видна. 3D-преобразованные элементы отображают одинаковое содержимое с обеих сторон, поэтому обратная сторона выглядит как зеркальное отображение лицевой стороны. Свойство backface-visibility позволяет делать элемент невидимым, когда его обратная сторона обращена к зрителю.

Свойство полезно, когда вы создаете флип-карту, размещая два элемента вплотную друг к другу, или куб из 6 элементов.

Свойство не наследуется.

backface-visibility
Значения:
visible	Значение по умолчанию. Указывает, что обратная сторона видна.
hidden	Скрывает обратную сторону элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

5. Функции 3D-трансформации

Свойство задает вид как 2D, так и 3D-преобразований элемента. 3D-преобразования описываются с помощью функций трансформации, перечисленных в таблице ниже.

Источник

Почему не работает transform: translate по оси z?

У меня есть элемент, которому заданы transform: perspective(500px) и transform: translate(0 0 100px) . Почему элемент не двигается по оси зет?

Кроме того, при добавлении transform: translate перестает работать rotate . Что я делаю не так? Большое спасибо.

Мои примеры — 1. Без добавления transform: translate

С добавлением transform: translate

2 ответа 2

Попробуйте использовать translateX / translateY / translateZ :

Тут дело было в том, что само свойство transform: translate может задавать значение ТОЛЬКО для x, y. Что же касается оси z, то тут нужно отдельно прописывать translateZ и задавать ему значение.

. Также значения в transform: translate должны быть разделены запятой – transform: translate(100px, 200px) В противном случае свойство не будет работать.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css transform или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

‘transform3d’ не работает с позицией: фиксированные дети

у меня есть ситуация, когда в обычных обстоятельствах CSS фиксированный div будет расположен именно там, где он указан ( top:0px , left:0px ).

Это, похоже, не соблюдается, если у меня есть родитель, который имеет преобразование translate3d. Разве я ничего не вижу? Я пробовал другие варианты webkit-transform, такие как style и transform origin, но не повезло.

я прикрепил JSFiddle с примером, где я ожидал, что желтый ящик будет вверху угол страницы, а не внутри элемента контейнера.

это упрощенная версия скрипка:

будут оценены любые указатели для того чтобы сделать translate3d работать с фикчированн-расположенными детьми.

12 ответов

это так transform создает новую локальную систему координат, а в W3C spec:

в пространстве имен HTML любое значение, кроме none для преобразования приводит к созданию как контекста стекирования, так и содержащего блока. Объект действует как содержащий блок для фиксированных расположенных потомков.

это означает, что фиксированное позиционирование становится фиксированным для преобразованного элемента, а не для окна просмотра.

в настоящее время нет работы, о которой я знаю.

Как Bradoergo предложил, просто получить окно scrollTop и добавьте его в абсолютную позицию сверху, например:

это сработало для меня в любом случае.

У меня было мерцание на моем фиксированном верхнем навигаторе, когда элементы на странице использовали transform, следующее, примененное к моему верхнему навигатору, решило проблему прыжков/мерцания:

в Firefox и Safari вы можете использовать position: sticky; вместо position: fixed; но это не будет работать в других браузерах. Для этого вам нужен javascript.

не найдя удовлетворительного метода для решения этой проблемы; и делая некоторые вещи вне холста (требующие перевода)-я немного покопался и обнаружил, что (по крайней мере, для моего использования) лучший способ справиться с этим-применить тот же перевод, но сломать детей, которые должны быть исправлены из их родительского (переведенного) элемента; а затем применить перевод к div внутри position: fixed фантик.

результаты выглядят примерно так (в вашем case):

хотя это может быть не идеально для некоторых случаев использования, обычно, если вы фиксируете div, вы, вероятно, могли бы меньше заботиться о том, какой элемент является его родителем/где он попадает в дерево наследования в вашем DOM и, кажется, решает большую часть головной боли — все еще позволяя обоим translate и position: fixed жить в (относительной) гармонии.

У меня аналогичная проблема, и я считаю, что вокруг нее есть работа. Я использую snap.мы с js хотим, чтобы один из дочерних divs контейнера содержимого был закреплен на своем месте. Однако, когда ящик открывается, JavaScript запускает свойство transform: translate3d для родительского контейнера, и это также влияет на фиксированный дочерний элемент (фиксированный элемент перемещается вместе со своим родителем и остается фиксированным в новой позиции).

при этом, как говорится, фиксированное свойство становится частично бесполезный. Чтобы решить эту проблему, можно добавить прослушиватель событий, который будет запускать отдельный tranform:translate3d для фиксированного дочернего div. И направление этого перевода должно быть противоположно преобразованию родителя: translate3d.

я столкнулся с той же проблемой. Единственное отличие состоит в том, что мой элемент с «position: fixed» имел свои свойства стиля » top » и «left», установленные из JS. Поэтому я смог применить исправление:

объект oRect будет содержать реальные (относительно порта просмотра) верхние и левые координаты. Таким образом, вы можете настроить фактический элемент oElement.стиль.верхней и oElement.стиль.левые свойства.

У меня есть боковая панель off canvas, которая использует-webkit-transform: translate3d. Это мешало мне разместить фиксированный нижний колонтитул на странице. Я решил проблему, выбрав класс на html-странице, который добавляется в тег при инициализации боковой панели, а затем написал CSS :not qualifier для состояния «-webkit-transform: none;» в HTML-тег, когда этот класс отсутствует в html-теге. Надеюсь, это поможет кому-то там с этой же проблемой!

попробуйте применить противоположное преобразование к дочернему элементу:

добавьте динамический класс во время преобразования элемента. $(‘#elementId’).addClass(‘transformed’) . Затем перейдите к объявлению в css,

теперь position: fixed при наличии top и z-index значения свойств дочернего элемента просто работают нормально и остаются фиксированными, пока родительский элемент не преобразуется. Когда преобразование возвращается, дочерний элемент снова появляется как фиксированный. Это должно easen ситуацию, если вы используете навигацию боковая панель, которая открывается и закрывается по щелчку, и у вас есть вкладка, которая должна оставаться липкой при прокрутке страницы.

один из способов справиться с этим-применить то же преобразование к фиксированному элементу:

Если вы работаете на мобильном телефоне с меню offcanvas, возможно, этот код поможет вам.

Источник