Вопросы с меткой [transform]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
13 голосов
1 ответ
325 показов

HTML-CSS: как избавиться от контура при трансформации блока?

Задача - сверстать кроссбраузерно вот такого вида слайдер. Применяю трансформацию + псевдоэлементы. Вроде бы, всё просто, но откуда-то появляется контур блока-обёртки: .wrapper { width: 250px; ...
humster_spb's user avatar
  • 13.5k
9 голосов
3 ответа
4k показов

Вращение блока при движении мышкой

Нужна анимация как на сайте https://openai.com/ Карточка сверху в правом блоке и ряд внизу. Кратко: При движении мыши над блоком-карточкой, сторона над которой находится мышь как бы отдалялась ...
Данила Никонец's user avatar
9 голосов
4 ответа
7k показов

Баг при использовании "transform: scale();"

При наведении на блок он должен увеличиваться и текст внутри него, соответственно, что собственно и происходит. Хром отображает все корректно, а вот мазила - нет. В мазиле наблюдается такой баг, что ...
Viktor Tsoy's user avatar
6 голосов
2 ответа
88 показов

Можно ли рассчитать угол rotateY и значение perspective?

Хочу сделать то, что на фото Вопрос: Можно ли каким-то способом рассчитать угол rotateY ИЛИ все это делается "на глаз", подгоняя под пример?
Eva's user avatar
  • 1,889
5 голосов
2 ответа
116 показов

Почему анимация работает не так, как я написал?

Почему анимация работает не так, как я написал? Суть анимации: Красный блок уходит влево на 140px, после он поворачивается на 720 градусов. А в итоге получается то, что он просто 2 раза уходит влево....
lwqx6's user avatar
  • 145
5 голосов
1 ответ
1k показов

Как разобрать matrix на scale, rotate, translate, skew?

Дело такое, getComputedStyle(element).getPropertyValue("transform") возвращает matrix(a, c, b, d, tx, ty). C translate всё вроде бы просто: translateX = tx, translateY = ty. А вот как вытащить scale, ...
Kirpich643's user avatar
5 голосов
4 ответа
3k показов

Почему transform: translate(-50%, -50%) размывает текст?

Много где я использую эту фичу, ибо удобно: @include transform(translate(-50%, -50%)); left: 50%; top: 50%; но появилась проблема со шрифтами, они становятся размытыми вот С ...
Nikita Shchypylov's user avatar
5 голосов
2 ответа
384 показа

Баг при использовании CSS-свойства transform

При использовании CSS-свойства transfrom наблюдается пробел между HTML-элементами. Что это вообще за пробел и как его можно красиво убрать? Фигура тут не имеет значение. Важно именно решение ...
V.Manokhin's user avatar
4 голоса
3 ответа
3k показов

Нужно сделать обводку при наведении

Есть у меня вот такая реализация, где при наведении плавно появляется нижний бордер, а теперь нужно в таком стиле сделать весь прямоугольник Код, это все что слева .order-row { display: flex;...
Дмитрий Лебедь's user avatar
4 голоса
1 ответ
138 показов

как изогнуть изображение на bitmap

Можно ли деформировать изображение на bitmap , чтобы результат выглядел примерно так: Методы матрицы (например setPolyToPoly() ) позволяют только растягивать и скашивать изображение , но не изгибать
hardhare's user avatar
4 голоса
1 ответ
1k показов

Off-canvas меню

Добрый вечер! На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое. Изначально ...
Artūrs Krancs's user avatar
3 голоса
2 ответа
144 показа

Трансформация поворота в SVG?

Столкнулся с непониманием, как сделать поворот определенной части сгруппированной svg части объекта. Приведу пример .game_block { position: relative; width: 100%; height: 100%; min-...
BlackStar1991's user avatar
3 голоса
2 ответа
10k показов

Плавное появление элемента из display:none в inline

Интересует такая штука – как заставить блок расширяться плавно при наведении, то есть иконка становится видимой по мере того, как в течение анимации до конца выезжает кнопка справа? body { ...
Payjay's user avatar
  • 35
3 голоса
1 ответ
182 показа

Плавное катание и передвижение шара

Есть div , делаю эффект будто он катиться. Делаю с помощью translate и rotate. Как достичь плавности и большей реальности в конце пути шара, что бы он плавно остановился? И как просчитывать ...
zkolya's user avatar
  • 1,336
3 голоса
2 ответа
539 показов

Ресайз и сохранение положения блока с position:absolute

Есть блок div.mapCollectives с position:relative и вложенный список ul.collectives>li. <div class="mapCollectives"> <img src="img/map.png" alt=""> <ul class="...
FitzgeraldFox's user avatar
3 голоса
1 ответ
118 показов

Что происходит с фиксированными дочерними элементами при трансформации родителя?

Если у фиксированного элемента родитель как-то трансформируется, то этот самый фиксированный элемент ведет себя как абсолютно позиционированный. Почему? Как этого избежать? В примере если ...
Georgy Yuriev's user avatar
3 голоса
0 ответов
100 показов

Обнулить offset в RectTransform, расположив anchors по углам rect

Кратко: как провести линию из нижнего левого в правый верхний угол экрана? Если я сделаю: offsetMin = Vector2.zero; offsetMax = Vector2.zero То прямоугольник встанет точно по якорям, будто я вручную ...
Максим Фисман's user avatar
2 голоса
2 ответа
1k показов

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

У меня есть элемент, которому заданы transform: perspective(500px) и transform: translate(0 0 100px). Почему элемент не двигается по оси зет? Кроме того, при добавлении transform: translate перестает ...
Eva's user avatar
  • 1,889
2 голоса
1 ответ
270 показов

Groupby + transform + lambda-функция от двух переменных

Есть DataFrame c несколькими уровнями группирующих ключей вида (группа, подгруппа уровня 1, подгруппа уровня 2 и тд.). Есть столбец значения 1 и значения 2. Необходимо создать столбец, являющийся ...
Stepan Sokol's user avatar
  • 1,191
2 голоса
2 ответа
692 показа

Анимация поворота уже трансформированного элемента средствами CSS и JS

На простенькой html-страничке я кнопками вращаю изображение. Если изображение вращать только кнопками "повернуть по часовой" и "повернуть против часовой", то изображение вращается ...
DiD's user avatar
  • 7,606
2 голоса
1 ответ
260 показов

Что возвращает getComputedStyle().transform?

Делаю анимацию свойства transform. Нужно получить это свойство от элемента, для этого использую getComputedStyle и получаю transform: "matrix(0.00234711662304943, 0.999997245517985, -0.999997245517985,...
Станислав Далинин's user avatar
2 голоса
1 ответ
102 показа

Реализовать два блока, имитирующие кулисе, при наведении появляется текст

Реализовать два блока, имитирующие кулисе, при наведении появляется текст <div class="box"> <div class="Box1"><kbd>Box1</kbd></div> <div class="Box2">&...
Bohdan's user avatar
  • 209
2 голоса
1 ответ
81 показ

Как в шейдере сделать rotateY как в css?

Как сделать 3D-поворот относительно вертикальной оси в шейдере? Работать должен так же, как следующая css-трансформация (лучше смотреть на весь экран): body { perspective: 1000px; } img { ...
Qwertiy's user avatar
  • 124k
2 голоса
1 ответ
71 показ

трапеция. отступ от угла. css. responsive

Есть два блока в форме трапеции. По левому краю от этих двух блоков идет линия под углом. как при адаптиве рассчитать отступ относительно этой линии для обоих блоков, если их высота меняется? Дело в ...
JKaminsky's user avatar
2 голоса
1 ответ
756 показов

Не срабатывает transition при добавлении класса с помощью element.classList

есть слайдер ` <div class="slider_item slider_item-block></div> <div class="slider_item></div> <div class="slider_item></div> ` стили ...
Yurii Senenko's user avatar
2 голоса
1 ответ
2k показов

Как использовать transform: scale() без потери четкости при медленном transition?

Как использовать transform: scale() без потери четкости при медленном transition? Допустим, transform: scale(1.5), а transition: all 1s linear. При :hover, в момент увеличения, блок теряет свою ...
Dmitry's user avatar
  • 55
2 голоса
0 ответов
106 показов

Ширина и высота трансформированного элемента

Есть трансформируемый пользователем элемент(синий прямоугольник), его можно повернуть с помощью transform:rotate() и масштабировать с помощью transform:scale(). Как получить iX и iY? element....
Николай Шляпников's user avatar
2 голоса
0 ответов
65 показов

Получение позиции мышки относительно блока к которому применено CSS-свойство transform с rotateX и rotateZ

Подскажите, пожалуйста, как получить позицию мышки относительно блока к которому применено CSS-свойство transform с rotateX и rotateZ? На первом скриншоте показано, что после применения CSS-свойства ...
Владислав Брайко's user avatar
2 голоса
2 ответа
303 показа

плоскость rotate 3d в css

Есть вот такой куб Мне нужно натянуть на его верхнюю грань div так. Понятно, что здесь без transform не обойтись. Я пробовал через rotate3d, но никак не получается правильно определить углы, уже ...
Simon's user avatar
  • 61
2 голоса
1 ответ
204 показа

Android. Трансформация при скроле

Как трансформироваться с одного дизайна в другой при скроле? Например, у нас есть 2 layouts, которые работают с RecyclerView и мне надо понять, как трансформировать при скроле с одного вида в другой? ...
Satanist Devilov's user avatar
2 голоса
1 ответ
588 показов

Взаимодействие transform rotate и flexbox

Возникла необходимость динамически поворачивать изображения, сверстанные через flexbox, собственно тут выяснилось, что после поворота изображения, для внешнего мира оно все так же продолжает занимать ...
Георгий's user avatar
1 голос
4 ответа
104 показа

Как сделать обратную анимацию?

Насколько мне известно в transition работает обратная анимации. Почему в моем примере обратная анимация такая упоротая? Хочу сделать так, чтобы крестик разложился обратно на параллельные линии https:/...
MAslaev's user avatar
  • 93
1 голос
1 ответ
492 показа

Почему не работает perspective?

У меня есть родитель, которому я задаю perspective и rotateY(60deg). НО "родитель" не выглядит так, как если бы он находился в 3д пространстве. В чем может быть проблема? .parent { ...
Eva's user avatar
  • 1,889
1 голос
1 ответ
237 показов

Не инициализируется первоначальное состояние owl carousel - ошибка TypeError: el.find is not a function

Есть новостной слайдер скомпонованный из двух взаимодействующих owl-carousel, который работает по переключению как стрелок, так и по названиям пунктов меню в правом блоке. Есть 2 бага: 1 - не ...
Вася's user avatar
  • 4,482
1 голос
1 ответ
3k показов

Unity: Реальный размер объекта

Короче у меня есть куча UI объектов, и один из них вот этот: Вот тут вы можете видеть что размер объекта 680 на 680: Я хочу с помощью этого кода получить размеры объекта: Debug.Log(...
eccs0103's user avatar
  • 2,989
1 голос
1 ответ
376 показов

Не отображается гамбургер меню на css (checkbox)

Меню постоянно скрыто (transform: translateY(-100%); opasity: 0;), при нажатии должно выезжать сверху (transform: translateY(0%); opasity: 1;). Как его отобразить с помощью комбинаций селекторов ...
user avatar
1 голос
4 ответа
4k показов

Кроссбраузерный zoom?

Почему к примеру на Firefox не работает zoom, и работает moz-transform: scale - криво? Zoom масштабирует целиком, если использовать в html, body, на весь экран... transform: scale - если уменьшаем, то ...
Vladimir Rodichev's user avatar
1 голос
1 ответ
65 показов

SetParent in Unity

Всем добрый день! Создаю приложение под android на примере https://www.youtube.com/watch?v=BgPiKw8Q6Xk&list=PL0lO_mIqDDFVuqf113xXF-0JaglMUMXCV&index=14, в данный момент у меня возникла ...
Superbarsik's user avatar
1 голос
1 ответ
158 показов

Псевдокласс hover и свойство transform

Проблема пустяковая, но совсем не могу понять почему так происходит. Сделал кнопки прокрутки контента из одной кнопки next.svg для перехода в перед и назад(просто прописал свойство transform:rotate(...
BattLzZ's user avatar
  • 35
1 голос
1 ответ
68 показов

Совместимость transform: skew с border и border-radius

У меня есть 3 блока со значением transform: skew(0deg, 10deg). При попытке прописать border (см 1 фото) или border-radius (см 2 фото) верхняя (косая) граница становится "ступенчатой". Без ...
Altereyo's user avatar
1 голос
1 ответ
792 показа

Как сделать так, чтоб при наведении увеличивался масштаб изображения, НО при этом сам элемент не выходил за назначенные ему границы?

Как сделать так, чтоб при наведении увеличивался масштаб изображения, НО при этом сам элемент по прежнему оставался 300рх и не выходил за назначенные ему границы? Почему в данном случае не действует ...
Eva's user avatar
  • 1,889
1 голос
1 ответ
588 показов

CSS | Transform translate (X, Y) effect on mousemove

Имеется эффект который при наведении анимирует круг таким образом, чтобы менялось значение rotate по X и Y , но как добиться эффекта чтобы работало под translate. var box = $(".scene"); box.on('...
MoloF's user avatar
  • 4,588
1 голос
2 ответа
219 показов

Поворот img не выходя за пределы div

Имеется div в нем img при нажатии на картинку поворачиваю на 90 град (transform:rotate). Но проблема в том, что img начинает выходить за div перекрывая вышестоящие элементы. overflow:hidden не решение....
KordDEM's user avatar
  • 940
1 голос
2 ответа
72 показа

float:left и transform:rotate. Возможно ли нормально упаковать div?

Можно ли притянуть серый блок к развёрнутому тексту? Можно притянуть через сдвиг по relative, но тогда сдвигаются за пределы окна перемещённые на новую строку. #specSZ { position:relative; ...
Vitaly Tokarenko's user avatar
1 голос
1 ответ
3k показов

Css transform + transition резко обрывается анимация

Почему дергается анимация? Когда навести курсор, потом убрать, дождаться пока анимация вернется на начальную позицию и резко опять навести курсор, то анимация начинается как бы не с начала. Это ...
Ростислав's user avatar
1 голос
2 ответа
143 показа

Как склеить вектор векторов в один вектор с помощью transform_reduce?

#include <iostream> #include <iterator> #include <vector> #include <numeric> #include <string> using namespace std; int main() { vector<vector<string>> ...
Давид's user avatar
1 голос
1 ответ
42 показа

UI геометрия Transform: рассчитать rotate от текущих значений

Есть например объект со значением transform scale 1.66, нам надо установить ему scale 1.0. Проблема в том, что мы не можем установить абсолютное значение, а только относительное: то есть если мы ...
posix's user avatar
  • 359
1 голос
1 ответ
3k показов

Как сделать, чтобы изображение подстраивалось под размер экрана

Я хочу, чтобы изображение на моем экране подстраивалось под размер экрана. Помогите, пожалуйста, кому не сложно. import pygame pygame.init() screen = pygame.display.set_mode((1000,1000)) pygame....
user473939's user avatar
1 голос
1 ответ
300 показов

Как повернуть текст внутри блока div чтобы он не выходил за границы блока

Не получается отобразить слева посередине блока слова: "важно" и "не важно" * { margin: 0; padding: 0; } .main { width: 80%; height: 80vh; margin: 0 auto; ...
Andrey's user avatar
  • 25
1 голос
1 ответ
249 показов

Трансформирование элемента с помощью css transform (rotate) и его финальное положение на странице

При трансформировании элемента, например, повороте на 90%, элемент поворачивается от своего центра. Вопрос: как повернуть элемент, чтобы его прибило к краю блока?
Bareza's user avatar
  • 105