Почему не работает transform translate

Свойство 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

Источник

Почему не работает 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.19.40495

Нажимая «Принять все файлы 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, возможно, этот код поможет вам.

Источник

Перемещения и трансформации в CSS3

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

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

• object: Установление главных правил нашего объекта.
• van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
• move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

• linear: перемещение происходит постоянной скоростью от начала и до конца.
• ease: перемещение начинается медленно и затем набирает скорость.
• ease-in: перемещение начинается медленно.
• ease-out: перемещение заканчивается медленно.
• ease-in-out: перемещение начинается и заканчивается медленно.
• cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

Источник