Jquery css не работает transform

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

Источник

jQuery вращать /трансформировать

Я хотел бы использовать эту функцию для поворота, а затем остановки в определенной точке или степени Прямо сейчас элемент просто вращается без остановки. Вот код:

Спасибо за вашу помощь

5 ответов

Просто удалите строку, которая поворачивает ее на один градус за раз и вызывает сценарий навсегда.

Затем передайте желаемое значение в функцию . в этом примере 45 для 45 градусов.

Измените .css() на .animate() в чтобы анимировать вращение с помощью jQuery . Нам также нужно добавить продолжительность анимации 5000 на 5 секунд. Обновление исходной функции для устранения избыточности и поддержки большего количества браузеров .

EDIT: стандартный код анимации jQuery CSS, приведенный выше, не работает, поскольку, очевидно, jQuery .animate() не работает пока поддерживает CSS3 transforms .

Этот плагин jQuery должен анимировать вращение:

Это потому, что у вас есть рекурсивная функция внутри rotate. Он снова звонит сам:

Уберите это, и он не будет работать рекурсивно.

Я бы также предложил просто использовать эту функцию:

Это намного чище и будет работать для большинства браузеров.

Почему бы просто не использовать toggleClass при клике?

вы также можете добавить это к CSS:

который добавит анимацию.

чтобы ответить на ваш оригинальный вопрос:

вы сказали, что он вращается, но никогда не останавливается. При использовании установленного тайм-аута вы должны убедиться, что у вас есть условие, которое не вызовет settimeout, иначе оно будет работать вечно. Итак, для вашего кода:

Я придумал какое-то решение проблемы. Это включает в себя JQuery и CSS. Это работает как переключатель, но вместо переключения отображения элементов он просто меняет свои свойства при альтернативных щелчках. При нажатии на элемент div он поворачивает элемент с тегом на 180 градусов, а при повторном нажатии элемент с тегом возвращается в исходное положение. Если вы хотите изменить продолжительность анимации, просто измените свойство transition-duration.

Источник

CSS3: свойство transform не работает должным образом в Chrome

Я пытаюсь достичь следующего . И он работает довольно хорошо в firefox, но тот же css

Работа в Chrome выглядит примерно так, как показано ниже

Я думаю, что -webkit-transform-origin: 50% 100%; не работает в Chrome и не работает, но не так, как ожидалось

2 ответа

Вероятно, я обнаружил ошибку .. Это аппаратная проблема, которую я проверил на многих компьютерах и обнаружил, что компьютер, на котором установлены графические карты, это тот, кто может запускать их плавно, как они есть hardware accelerated .. В противном случае косой чертой отличается его software accelerated ..

Просто проверьте конфигурацию вашего компьютера с помощью chrome://gpu в адресной строке, и вы найдете разницу

На следующем изображении все работает нормально .

Следующее изображение — это то, на котором он работает не так, как ожидалось .

В любом случае, спасибо за ваши ответы и комментарии. Одну услугу, пожалуйста, подтвердите мне, проверив, если возможно.

Вы делаете это неправильно, вам нужно использовать transform-style: preserve-3d для родительского элемента, после чего вы можете преобразовать дочерний элемент. А поскольку для повышения производительности вы используете 3D, вам понадобится backface-visibility: hidden;

И вы можете использовать -webkit-transform-origin: 50% 100%; или просто без префиксов пользователей из LEA VEROU

Источник

Почему transform: rotate() не работает на символе?

Друзья, помогите! Почему не работает свойство transform на символ?

• Вопрос задан более трёх лет назад
• 1312 просмотров

Скажите, а как вставить такой же символ, но в .png формате?

Пытаюсь сделать в CSS background: url (‘. ‘);
но ничего не выходит — он просто не показывается

я не знаю, как скинуть именно мою картинку, но выглядит вот так:

хотя! если bg-color сделать, то он мне его заливает, но сам символ — нет

Прошу помочь разобраться!

usedtoknow, да так же, в папке img создаёшь пустой текстовый файл.
копируешь в него код вектора (например стрелка с тостера)

переименовываешь этот файл в «array.svg» (любое имя с svg расширением)
и в стилях обновляешь ссылку на изображение
../img/array.svg

usedtoknow, что значит не меняется? если не меняется цвет, то надо при ховере на ссылку менять и цвет у иконки.

а вообще почитайте про теги html, css селекторы и сразу отпадут большинство вопросов

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

Но в любом случае, спрашивая вопросы и получая на них овет, я учусь намного быстрее

Источник

Сочетание CSS-свойств: transform, translate, rotate, scale и offset

CSS-свойство transform становится ещё мощнее, благодаря новым отдельным свойствам преобразований ( translate , rotate , scale ) и свойству для смещения — offset (как часть CSS Motion Path). Все они эффективно обеспечивают преобразование html-элемента и должны следовать определенным правилам, чтобы точно определять, как эти преобразования будут применяться.

Эти новые свойства доступны в Firefox 72+. Отдельные свойства Motion path есть в браузерах Chromium, а некоторые свойства преобразования скрываются за флажком Experimental Web Platform Features.

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

Как эти свойства взаимодействуют с transform и transform-origin ?

Основы преобразований

Когда выполняется преобразования, то сам элемент технически остается неизменным. Трансформации влияют только на его систему координат. Таким образом, вращение поворачивает его по осям x и y. Для преобразования, которое поворачивает элемент на 45 градусов, а затем применяет перевод на 100 пикселей вправо, реальное движение не будет горизонтальным вправо. Вправо элемент начнёт перемещение от уже измененной при повороте системы координат: вниз и вправо под углом 45 градусов.

Какие возможности предоставляют отдельные свойства преобразования?

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

На первый взгляд можно было бы ожидать, что элемент будет повернут на 10 градусов ( rotate ), а затем при наведении курсора добавит к исходному преобразованию масштабирование ( scale ). Однако, свойство transform будет переопределено, поэтому вращение потеряется при наведении курсора. По мере того, как усложняются различные состояния или взаимодействия, может быть тяжело поддерживать все желаемые варианты преобразований.

С отдельными свойствами преобразования можно добавлять или удалять отдельные трансформации, не влияя на остальные. Таким образом, можно немного изменить код и получить желаемый результат, в котором элемент при наведении одновременно поворачивается и масштабируется.

Теперь можно применить transition или анимацию по отдельности. В этом примере масштабирование и перемещение изменяются при наведении курсора с разной продолжительностью и задержкой. Поворот не выполняется в transition и не влияет на анимации двух других свойств.

Есть ли ограничения?

Отдельные свойства не работают с несколькими вариантами опций, как в исходном свойстве transition . Если нужно реализовать что-то большее, придётся вернуться к transition .

Все они также имеют один и тот же transform-origin , поэтому независимо от того, используете ли свойство transform или три свойства по отдельности, все они зависят от transform-origin .

Эти свойства всегда применяются в одном и том же порядке, и они появляются перед всем остальным в свойстве transform :

Если нужно, чтобы rotate применялось перед translate , придётся использовать свойство transform . Подойдёт любой из следующих вариантов.

Свойство offset

С помощью свойства transform элемент можно перемещать, вращать, масштабировать и наклонять. Также эффективно перемещать и вращать элемент можно с помощью свойства offset .

Несмотря на то, что это работает по-другому, все свойства offset применяют преобразования в той же системе координат. Таким образом, они полагаются на тот же transform-origin , который используют остальные четыре отдельных свойства преобразований.

Когда применяются свойства offset ?

Три новых независимых свойства преобразования применяются до свойств offset . Функции transform применяются после offset .

1. translate
2. rotate
3. scale
4. offset (distance, anchor, rotate …)
5. transform (здесь можете устанавливать свой порядок)

Так, например, использование базовой анимации offset-path вернёт различный визуальный результат, если объединить ее с transform: translate (25px -35px) или translate: 25px -35px .

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

Поддержка отдельных свойств преобразований в вашем браузере

translate
rotate
scale
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

Источник