Описание тега css-transforms
Преобразования CSS позволяют преобразовывать элементы, стилизованные с помощью CSS, в двухмерном или трехмерном пространстве.
2
ответа
Преобразование высоты дочернего элемента div при наведении на родительский элемент div
Я бы хотел transform height из моего .bar в 3px при зависании .wrapper, Я знаю, что должен использовать transition а также transform, но я понятия не имею, как transform мое дитя div наведите его родителя. На данный момент я transform только мой род…
11 июл '17 в 08:49
1
ответ
Как вращать фон, сохраняя контейнер фиксированным?
Это мой HTML-код: <style> #myelement { position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); border:#000000 s…
26 июн '15 в 08:37
5
ответов
Как добавить простую анимацию флип-карты?
Я создаю одиночную игру. До сих пор у меня все работало, но анимация переворота карты - боль в а **. Посмотрите на эту скрипку (она может быть немного медленной, так как в ней весь код игры) При перетаскивании карты ее оборотная сторона заменяется л…
14 июн '14 в 21:40
1
ответ
Сделайте карту перевернутой снизу, не двигаясь вертикально
Я пытаюсь создать объект типа ролодекс, который будет включать в себя карты, вращающиеся вокруг своей оси x, используя transform-origin:bottom; Это отчасти работает, но во время анимации карта движется вертикально, поэтому она убирает эффект "неподв…
27 янв '15 в 15:32
1
ответ
Проблемы с выравниванием текста в HTML при преобразованиях
Я пытаюсь отобразить строку преобразованного текста в html/css, однако у меня были некоторые проблемы. Когда я масштабирую направление Y, общее выравнивание элементов смещается, как на этом рисунке. Попытка просто повернуть L на 180 градусов приводи…
03 ноя '17 в 23:56
1
ответ
Ключевые кадры CSS с использованием calc с Mircrosoft Edge
Таким образом, кажется, что Microsoft Edge не позволяет использовать CSS calc() в @keyframes? @keyframes logoanimatestart{ from {transform: rotateY(360deg); width:50px; height:50px;top:-80px; left:100%;} to {transform: rotateY(0deg); width:100px; he…
04 сен '15 в 13:31
1
ответ
Почему перспектива не применяется к дочерним элементам контейнера?
Я делаю 3D план этажа с 4 этажами и хочу применить одну и ту же перспективу ко всем этажам. Это оказывается проблемой. По несвязанным причинам я должен поместить обертки в div, которые будут содержать фактические изображения плана этажа. Структура в…
18 дек '17 в 14:26
5
ответов
Центрируйте div более разумно с помощью CSS
Я центрирую объект с помощью следующего кода: .object { width: 70%; height: 70%; position: absolute; top: 50%; left:50%; /* these are the lines to which I will refer */ margin-top: -350px; margin-left: -350px; } Я использую поля сверху и слева, чтоб…
09 авг '17 в 15:45
3
ответа
Кнопка со стрелкой вправо - переход
Я сделал кнопку CSS с правой границей в форме стрелки, с помощью преобразований CSS и псевдоэлементов. Сейчас я пытаюсь добавить переход к фону при наведении, но понял, что есть проблема, в месте, где кнопка перекрывается псевдоэлементом, во время п…
13 май '16 в 08:57
2
ответа
Как увеличить SVG при наведении?
Как сделать каждый раздел SVG больше при наведении. Я пытаюсь повторить, как это делает интерактивная карта: http://goo.gl/orvyYI Я создал базовую интерактивную карту для тестирования: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: …
31 окт '15 в 08:06
1
ответ
Соседние перекосы делят промежуток в 1 пиксель между ними
У меня есть два наклонных делителя с линейным градиентным фоном, которые должны идеально совмещаться, но между ними остается разрыв в 1 пиксель. Эта скрипка демонстрирует проблему: https://jsfiddle.net/jesperryom/rn1ncd5u/ Я видел два предложенных р…
03 июн '16 в 22:31
0
ответов
Содержимое размыто в Chrome после применения масштабирования и анимации одновременно
Когда на странице есть анимация, только тогда элемент масштабирования преобразования будет размытым (текст и изображения). Обычно это происходит только в Chrome. JSFiddle здесь. Я расследовал это, но, к сожалению, ничего не получил. Размытый снимок:…
09 мар '16 в 14:38
1
ответ
Использование: после элемента, чтобы сделать заголовок, который вращается и высота родительского div
Боролся с этим весь день. Я хочу, чтобы черный заголовок располагался идеально справа от четверти круга и динамически заполнял высоту. Цвета предназначены для вывода за пределы экрана и будут использовать анимацию поворота при наведении курсора, что…
05 июл '17 в 15:05
1
ответ
Поверните карту на 180 градусов вдоль оси Y
У меня это в основном работает (см. https://jsfiddle.net/90ycrope/1/), однако содержание во втором div со словом "сзади" видно по всему. Две цели, которые я пытаюсь достичь: Правильная функция (за контентом виден сзади, фронтальный контент виден спе…
28 окт '15 в 09:03
2
ответа
Задняя сторона-видимость не работает должным образом в Firefox (работает в Safari)
У меня проблема со свойством back face-visibilty. Он работает так, как я хочу, в Safari/Chrome, но по какой-то причине он не работает правильно в Firefox. Когда коробка переворачивается, я получаю зеркальное изображение передней грани.
07 мар '12 в 16:06
2
ответа
CSS Transform - проблема синхронизации в Firefox
Я сделал несколько CSS-анимаций, и в WebKit (Safari/Chrome) он работает нормально, но в Firefox время искажено. JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/ Код: var open = false; var intransition = false; function openCard() { intransition = true…
05 июн '12 в 10:49
1
ответ
Как добавить два переходных преобразования, но одно за другим?
Я хочу добавить 2 переходных преобразования Но я хочу начать второе преобразование после окончания первого преобразования элемент должен идти в точку медленно и после этого он должен идти в другую точку transform: translate(0%, 300%), translate(15%,…
30 май '16 в 14:27
4
ответа
Как повернуть + перевернуть элемент с помощью CSS
Свойство transform позволяет вращать или переворачивать, но как вы можете сделать оба одновременно? Скажем, я хочу повернуть элемент на 90 градусов и перевернуть его горизонтально? Оба выполняются с одним и тем же свойством, поэтому последний переза…
10 июн '13 в 00:39
2
ответа
3D вращающаяся анимированная панель, которая появляется после нажатия на ссылку меню
Мне нужно реализовать эффект, очень похожий на этот, включенный в Kartell.com, нажав на ссылки varoius, особенно "FollowUs" и "Search". Это трехмерное вращение DIV, которое подталкивает к следующему контенту. Я пытался исследовать его код с помощью …
13 май '15 в 10:16
3
ответа
Увеличить приложение до 80% по CSS
Мы используем приложение с открытым исходным кодом, и все в порядке. Единственное, что мне не нравится в продукте, это его макет и размер текста. Если я увеличу до 80% (либо Firefox, либо Chrome Browaer), то приложение выглядит идеально. Поскольку н…
10 май '15 в 13:29