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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

Источник

Не изменяется переменная в transform.rotation

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

Transform.rotation
Для стратегии камера должна не только передвигаться, но и менять угол просмотра. Для этого, при.

Transform.rotation. Углы
У меня есть камера, rotation(90,0,0). Необходимо повернуть её по Z при нажатии стрелки влево, но.

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

Первым делом в апдейт закинь, что бы видеть выхлоп в консоль, что бы увидеть когда оно срабатывает, и как оно работает.

Debug.Log(«transform.rotation.x = » + transform.rotation.x.ToString());
Debug.Log(«transform.rotation.y = » + transform.rotation.y.ToString());
Debug.Log(«transform.rotation.z = » + transform.rotation.z.ToString());

Добавлено через 3 минуты
Но, чтобтебя не мурыжить долго, ты пытаешься сравнить привычный для тебя угол с Quaternion.
Тк transform.rotation возвращает не тот ротейшн котрый у тебя в инспекторе.

тебе надо сравнивать с transform.eulerAngles

Добавлено через 2 минуты
if (transform.eulerAngles.z > 90f)
<
rspeed = 0;
>

Что — то типо такого

есть еще
Transform.localRotation
Transform.localEulerAngles

relative to the parent transform’s rotation.

Добавлено через 6 минут
плавный возврат к значению лучше делать так

transform.euler.rotation = Vector3.Lerp(transform.euler.rotation , Vector.Zero, Time.DeltaTime * speed);

вместо Vector.Zero твоё исходное положение камеры (тк я не знаю кактам у тебя что)

Добавлено через 53 секунды
с моего когда тупо копипастить — рабоать не будет, пишу примерно по памяти, придется гуглить как оно пишется правильно

Добавлено через 3 минуты
Что бы не было каши лучше выносить в отдельные функции мне кажется.
И писать в if’ах Debug.log , тогла поймешь что у тебя срабатывает и что не может

if (Input.GetKey(KeyCode.PageUp))
<
CamMoveDown();
>

if (Input.GetKeyUp(KeyCode.PageUp))
<
CamReset();
>

И учесть 1 раз срабатывает функция или пка жмешь кнопку.GetKeyUp вроди 1 раз отработает и всё, дкбаг покажет оно много раз отрабатывает или нет.

В случае если только 1 раз, то надо вешать на короутину, или делать булиан bool= isCamReseted и ждать пок не поменяется значение.

Я чесн тут не могу помочь, мало исходных данных. Я Указал возможные ошибки и варианты лечения

у меня с углами проблема, решаю всегда заново и забываю.
там после 180 градусов перескакивает на 0 или минус 360 вроди (точно не помню)

надо юзать что-то типо такого:

if(angle 180)
<
angle = Mathf.Clamp(angle, 350, 360);
>

Добавлено через 7 минут
выводи в дебаг в каждом кадре вращение, разгребай, что в консоли, а потом условием.
.
по возврату к исходному положению.

Самый легкий вариант.
Создать (пустой) GameObject в сцене, на месте камеры. Скопируй Трансформ ротейшн из камеры в твойю пустышку.

в скрипте объяви

public Transform CameraDefaultTransform.

Потом перетяни пустышку в инспектор, на место объявленной переменной.
Теперь у тебя есть как должна стоять камера.

в скрипте когда надо делаешь
mycamera.transform.Rotation = Quaternion.Lerp(mycamera.transform.Rotation, CameraDefaultTransform.rotation, Time.DeltaTime * speed);

или тоже самое, только лерпишь еулер поворот.
..

Лерпить с гейм обжектами в сцене удобно, лично мне. Тк можно легко настроить положения камер не трогая код. Пустышки в виде кубиков, видно где позиции камер. Потом отключил у них рендер и всё.

Добавлено через 8 минут
твой код прочитать не осилил тк сейчас под веществами и работу работаю свою

Источник

Сочетание 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

Источник

Не изменяется переменная в transform.rotation

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

Transform.rotation
Для стратегии камера должна не только передвигаться, но и менять угол просмотра. Для этого, при.

Transform.rotation. Углы
У меня есть камера, rotation(90,0,0). Необходимо повернуть её по Z при нажатии стрелки влево, но.

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

Первым делом в апдейт закинь, что бы видеть выхлоп в консоль, что бы увидеть когда оно срабатывает, и как оно работает.

Debug.Log(«transform.rotation.x = » + transform.rotation.x.ToString());
Debug.Log(«transform.rotation.y = » + transform.rotation.y.ToString());
Debug.Log(«transform.rotation.z = » + transform.rotation.z.ToString());

Добавлено через 3 минуты
Но, чтобтебя не мурыжить долго, ты пытаешься сравнить привычный для тебя угол с Quaternion.
Тк transform.rotation возвращает не тот ротейшн котрый у тебя в инспекторе.

тебе надо сравнивать с transform.eulerAngles

Добавлено через 2 минуты
if (transform.eulerAngles.z > 90f)
<
rspeed = 0;
>

Что — то типо такого

есть еще
Transform.localRotation
Transform.localEulerAngles

relative to the parent transform’s rotation.

Добавлено через 6 минут
плавный возврат к значению лучше делать так

transform.euler.rotation = Vector3.Lerp(transform.euler.rotation , Vector.Zero, Time.DeltaTime * speed);

вместо Vector.Zero твоё исходное положение камеры (тк я не знаю кактам у тебя что)

Добавлено через 53 секунды
с моего когда тупо копипастить — рабоать не будет, пишу примерно по памяти, придется гуглить как оно пишется правильно

Добавлено через 3 минуты
Что бы не было каши лучше выносить в отдельные функции мне кажется.
И писать в if’ах Debug.log , тогла поймешь что у тебя срабатывает и что не может

if (Input.GetKey(KeyCode.PageUp))
<
CamMoveDown();
>

if (Input.GetKeyUp(KeyCode.PageUp))
<
CamReset();
>

И учесть 1 раз срабатывает функция или пка жмешь кнопку.GetKeyUp вроди 1 раз отработает и всё, дкбаг покажет оно много раз отрабатывает или нет.

В случае если только 1 раз, то надо вешать на короутину, или делать булиан bool= isCamReseted и ждать пок не поменяется значение.

Я чесн тут не могу помочь, мало исходных данных. Я Указал возможные ошибки и варианты лечения

у меня с углами проблема, решаю всегда заново и забываю.
там после 180 градусов перескакивает на 0 или минус 360 вроди (точно не помню)

надо юзать что-то типо такого:

if(angle 180)
<
angle = Mathf.Clamp(angle, 350, 360);
>

Добавлено через 7 минут
выводи в дебаг в каждом кадре вращение, разгребай, что в консоли, а потом условием.
.
по возврату к исходному положению.

Самый легкий вариант.
Создать (пустой) GameObject в сцене, на месте камеры. Скопируй Трансформ ротейшн из камеры в твойю пустышку.

в скрипте объяви

public Transform CameraDefaultTransform.

Потом перетяни пустышку в инспектор, на место объявленной переменной.
Теперь у тебя есть как должна стоять камера.

в скрипте когда надо делаешь
mycamera.transform.Rotation = Quaternion.Lerp(mycamera.transform.Rotation, CameraDefaultTransform.rotation, Time.DeltaTime * speed);

или тоже самое, только лерпишь еулер поворот.
..

Лерпить с гейм обжектами в сцене удобно, лично мне. Тк можно легко настроить положения камер не трогая код. Пустышки в виде кубиков, видно где позиции камер. Потом отключил у них рендер и всё.

Добавлено через 8 минут
твой код прочитать не осилил тк сейчас под веществами и работу работаю свою

Источник