Вопросы по теме 'css-transforms'

Перевести x и y с разными функциями времени?
В настоящее время я использую следующий код для перевода x и y с одинаковой скоростью: -webkit-transition:all 180ms ease-out; Я хотел бы перевести ось X медленнее, чем Y. Можно ли указать что-то похожее на: -webkit-transition:translateX...
5240 просмотров
schedule 28.11.2021

Ошибка преобразования Chrome CSS3 3D
У меня есть css, чтобы перевернуть карточку на элементе в трехмерном пространстве. Он отлично работает, за исключением того, что когда вы прокручиваете страницу вверх и вниз, вы случайным образом получаете белые элементы, отображаемые на странице в...
1701 просмотров

Почему IE10 не отображает вложенные преобразованные элементы CSS3 3D?
Я немного заблудился, сейчас я тестирую IE10 (10.0.9200.16384), поставляемый с Windows 8 Release Preview, и мне очень тяжело. Одна из вещей, которая меня беспокоит, заключается в том, что IE, похоже, не обрабатывает вложенные 3D-преобразования...
4292 просмотров

Невозможно повернуть из одной конкретной ориентации в другую
У меня есть пример вращающегося анимированного куба с использованием преобразований и переходов CSS3. Проблема в том, что, похоже, невозможно повернуть CSS3 из начальной позиции в этот jsfiddle , чтобы показать цифру "4" (на один поворот...
676 просмотров
schedule 04.11.2021

исправлен элемент с неправильной позицией после анимации CSS
Здесь я создал jsFiddle , который копирует мою проблему. После анимации (двойное нажатие на MOVE) фиксированный столбец возвращается в неправильном положении. Можно ли оживить мой this без использования left или right для фиксированного...
3090 просмотров
schedule 27.11.2021

Нежелательный контур на границе при трансформации родителя
Я использую границы для некоторого контента. Однако я обнаружил нежелательный контур размером 1 пиксель того же цвета, что и цвет background , добавляемый вокруг границы при преобразовании родителя (по крайней мере, с scale и rotate ). Это также...
3116 просмотров
schedule 13.11.2021

Повернуть значок гамбургера SVG в X?
Я разработал значок с тремя полосами, используя чистый код SVG в HTML. Я использую преобразования CSS3, чтобы повернуть верхнюю и нижнюю панели в X-образную форму. Проблема в том, что они вращаются вокруг своего собственного центра, но мне нужно,...
2786 просмотров
schedule 13.11.2021

Преобразование изображения вращается без вращения
Я пытаюсь получить изображение X. Мне нужно повернуть на 180 градусов, когда он зависает, но он просто движется вверх и вправо, а не вращается. Что я делаю не так, что это не будет выглядеть так, как будто он вращается на 180 градусов?...
680 просмотров
schedule 06.10.2021

Преобразование поворота CSS делает изображение размытым
Я создал восьмиугольный обрезанный стиль, используя CSS-преобразование, вращение и масштабирование, как показано в фрагменте кода ниже. Однако при просмотре Chrome 52.0.2743.116 (64-разрядной версии) на El Capitan изображение выглядит размытым....
1513 просмотров
schedule 05.11.2021

Как получить относительное положение холста на холсте, преобразованном в 3D CSS?
Ради интереса я пытаюсь рисовать на трехмерных трансформированных холстах. Я написал код, и он вроде работает const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) => { const ctx = canvas.getContext('2d');...
396 просмотров
schedule 07.11.2021

Постоянная скорость перехода CSS
Я пытаюсь добиться постоянной скорости перехода. Заметьте, я не имею в виду разницу между «легкостью» и «линейностью». Я имею в виду, что если мы перейдем от 0 до 20 пикселей, это займет 1 секунду, но переход от 0 до 100 пикселей займет 10 секунд....
97 просмотров

Направляйте элемент к центру круга при вращении (CSS / JS)
Я пытаюсь переместить 10 объектов круговыми движениями, пока они указывают на центр круга. Я расположил элементы на круге, используя немного триггера в .js, но когда я пытаюсь повернуть их вокруг центра круга, они вращаются неправильно, с...
135 просмотров

Есть ли способ изменить масштаб, не растягивая Object Fit?
Если я использую масштаб трансформации, есть ли способ сохранить изображение объекта подходящим, используя покрытие от растяжения? Вот мой код div.category { width: 80%; height: 150px; margin: 20px; position: relative;...
231 просмотров
schedule 20.10.2021

Плавающие метки - метка над полем ввода
Я работаю над существующей формой, в которой хочу ввести плавающие метки. Многие решения, которые я видел при переполнении стека, великолепны, но требуют, чтобы тег label располагался непосредственно под тегом <input> . Например, здесь ....
36 просмотров

Как добавить фоновое изображение в div с перекошенными псевдоэлементами
Я новичок в программировании и пытаюсь получить те же результаты, что и этот https://imgur.com/a/sNOct04 В моем коде у меня есть один контейнер с двумя наклонными псевдоэлементами, чтобы придать желаемую форму. Теперь я хочу добавить фоновое...
46 просмотров
schedule 04.10.2021

Повернутые элементы в CSS, которые правильно влияют на высоту своего родителя
Допустим, у меня есть пара столбцов, некоторые из которых я хотел бы повернуть значения: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div...
91714 просмотров
schedule 03.03.2022

rotateY () против переходов matrix3d ​​в ​​Edge
Я столкнулся со странной проблемой, связанной с тем, как Edge (и IE 11) обрабатывает преобразование matrix3d. На странице, над которой я работаю, есть элементы, к которым уже применено произвольное преобразование (из-за использования плагина), однако...
424 просмотров

Проблема с преобразованием JavaScript
Любопытное поведение преобразования CSS в chrome (браузер webkit) с использованием JavaScript... var obj = document.getElementById('foooo'); // obj.style.transform == ""; obj.style.transform = "rotate(45deg)"; // works (another 2d transform)...
223 просмотров
schedule 14.03.2022

Можно ли установить другую продолжительность/задержку для параметров преобразования?
Я хочу установить несколько параметров преобразования для моего html-объекта, но с разной продолжительностью и задержкой. Если я попытаюсь использовать что-то вроде этого: -webkit-transition: -webkit-transform, opacity; -webkit-transform:...
31184 просмотров
schedule 24.03.2022

-webkit-transform ломает фоновую анимацию
Пытаясь попрактиковаться в своих преобразованиях, я создал простую анимацию, которая перемещала три элемента div, используя абсолютную позицию, и также трансформировала каждый из них из позиции в позицию. Это сработало так, как и ожидалось, без...
306 просмотров