Описание тега translate3d

NoneA CSS function to move the element in 3D space used with the transform CSS property
3 ответа

Почему эта анимация CSS Translate3d Janky?

Я не могу понять, почему производительность этого перехода CSS с использованием свойства аппаратного ускорения transform: translate3d(); не работает гладко. Возможно, потому что элементы абсолютно позиционированы? Я не знаю... CodePen Link Может кто…
2 ответа

Почему мои воздушные шары не летают правильно? CSS анимация перевести

Я пытаюсь сделать следующее с помощью CSS translate: При нажатии кнопки появляются воздушные шары и разлетаются. Когда они закончат полет, они исчезнут и вернутся в исходное положение (чтобы при следующем нажатии кнопки происходило то же самое). До …
01 авг '14 в 07:11
3 ответа

Невозможно остановить CSS3 переход преобразования с помощью translate3d

Я пытаюсь анимировать элемент с помощью CSS3-переходов, используя translate3d: JSFiddle. // for start animation $("#content") .css("-webkit-transition", "all 100s"); .css("-webkit-transform", "translate(0, -900px)"); // for stop animation $("#conten…
18 мар '13 в 18:32
0 ответов

Проверьте, не работает ли поддержка translate3d при загрузке скрипта в тело

Это предложенное решение, кажется, работает довольно хорошо в большинстве сценариев, но я заметил, что не удается обнаружить поддержку свойств translate3d, когда <script> тег используется внутри <body>, Воспроизведение онлайн Эта функция…
13 июн '16 в 15:21
0 ответов

CSS transform translate3d image анимация странное поведение сглаживания вызывает дрожание

У меня есть пример jsFiddle анимации изображения слева направо с использованием CSS3 translate3d, здесь: http://jsfiddle.net/Rhx2K/3/ У меня есть requestAnimationFrame, зацикливающийся на 60 кадров в секунду и устанавливающий левую позицию изображен…
2 ответа

CSS Transform3D и порядок наложения

Я использую изотоп для разметки некоторых предметов. Каждый пункт включает в себя всплывающее меню. Потому что изотоп использует translate3d для того, чтобы расположить и оживить элементы, мы все перепутали в порядке расположения меню. Более поздний…
16 ноя '12 в 18:16
0 ответов

Как я могу изменить переход при появлении нового изображения

При наведении на изображение, новое изображение появляется из середины и уменьшает и обратно. Я хотел бы изменить это так, чтобы изображение входило со стороны горизонтально без увеличения. Вот вебсайт, о котором я говорю: https://www.londontraditio…
15 апр '16 в 09:45
0 ответов

jQuery добавить / удалить класс на свитке translate3d

Heyo, так что у меня есть скрипт, который прокручивает CSS translate3d для плавной прокрутки. Теперь я хочу дать элементу класс каждый раз, когда translate3d(0px,0px,0px) изменения в translate3d(0px,-100,0px) или ниже. Вот мой текущий скрипт, которы…
23 май '18 в 10:03
1 ответ

-webkit-transform: переводить блочный рендер на iPad

Итак, я понимаю, что translate / translate3d использует графический процессор, но по какой-то причине он вызывает рендеринг крупной графики в виде блоков / блоков на iPad. Я испытываю трудности с поиском где-либо, где указана максимальная ширина / в…
29 июл '12 в 08:24
0 ответов

translate3d имеет несовместимое поведение в Safari против Chrome/Firefox при использовании перспективы

При использовании translate3d для перемещения объекта с абсолютным позиционированием, а также при использовании перспективы для изменения представления translate3d Safari не работает так же, как другие браузеры. Изображение с визуальным представлени…
1 ответ

CSS3 Transform Translate3D IE10

В соответствии с поддерживаемыми технологиями IE 10 то, что я пытаюсь достичь, должно работать, но я не могу понять, что происходит. в Firefox и Chrome он работает так же, как и должен, но в IE10 он отображается неправильно. Я исчерпал документы под…
1 ответ

Leaflet: переместить карту в начальный вид

Возможно ли переместить изображение по оси X? Если я преобразую translate3d(-20px,...,...), это сработает для меня. Но если я увеличу или перетащу карту, она будет сброшена. Например, у меня есть абсолютный контейнер и я хочу показать параллельно эт…
08 мар '17 в 14:01
3 ответа

3D-преобразование вращения граней куба неуместно

У меня есть этот 3d-куб: http://codepen.io/caemostajo/pen/yORNvx/, передняя и левая грани открываются при нажатии на 2-ю кнопку. Как вы можете видеть, что левое лицо не на своем месте, я не могу разместить его там, где оно принадлежит, сохраняя его …
28 апр '16 в 00:06
1 ответ

translate3d vs css left/top и аппаратное ускорение

Как я понимаю, аппаратное ускорение на устройствах iOS включается при использовании translate3d(). Так почему же этот тест на jsperf показывает, что использование css left/top быстрее?
27 авг '11 в 07:51
3 ответа

Firefox Mobile: элемент, анимированный с translate3d, выходит из родительского контейнера

У меня есть элемент, который я анимирую с translate3d transform. Родительский элемент имеет overflow: hidden, но в Firefox Mobile 19.0.2 во время анимации анимированный элемент виден за пределами родительского элемента. Анимация top собственность вм…
14 мар '13 в 09:07
1 ответ

Android Webkit Ошибка ввода элементов с CSS3 translate3D

У меня есть пара проблем с элементом ввода в Android-приложении Webkit, которое я разрабатываю. Тестирование на 2.X, но 3.x, похоже, не имеет этих проблем... Приложение работает, имея отдельные Div для каждой "страницы", и я использую CSS3 translate…
15 ноя '11 в 17:36
1 ответ

Translate3d изменчиво к концу трансформации на мобильном устройстве

Первоначально я использовал функции слайдов jQuery, чтобы выдвигать страницу из поля зрения (чтобы показать другую страницу под ней) в приложении Cordova, которое я создаю, и хотя это отлично работало в моем настольном браузере, оно (теперь понятно)…
10 сен '14 в 02:23
0 ответов

Необходим ли откат 2D для translate3d в ситуациях, когда на машине клиента нет поддержки 3D?

Нужно ли иметь 2D запасной вариант (translateXНапример, для translate3d в возможной (но редкой?) ситуации, когда браузер не может выделять 3D-ресурсы (например, в случае действительно старой видеокарты).
10 янв '17 в 18:24
0 ответов

Эффективный способ использования полноразмерного фонового изображения с анимацией CSS

У меня проблема с полноэкранным фоновым изображением и анимацией CSS. Независимо от того, как я пытаюсь оптимизировать анимацию, она всегда работает медленно (выше порога 60 кадров в секунду) поверх фонового изображения. Я использую css translate3d …
18 фев '15 в 20:28
2 ответа

Owlcarousel 2 - элементы не видны во время translate3d()

Я использую Owlcarousel 2 для скольжения по нескольким элементам div, проблема в том, что внутри каждой "скользящей страницы" есть некоторые элементы, позиционируемые как абсолютные (относительные не работают), и они не видны во время анимации, они …