Transform generator css3: CSS3 Transform Code Generator | Toptal®

Генератор преобразования CSS3

Генератор преобразований CSS3

Энди — 01 июля, 2014 5443 просмотров 0 комментариев

Свойство Transform в CSS3 позволяет изменять внешний вид элемента.

Повернуть: 10

 

Масштаб: 0,8

 

Наклон: 12

 

Переместить: 40

 

 

Комментарии

Популярные статьи

CSS3

17 января 2019 г.

В этом уроке мы узнаем, как создать мигающий цвет фона, используя свойство анимации CSS3.

TSQL

07 августа 2020 г.

Существует несколько способов удаления времени из DateTime в TSQL. Узнайте, как это сделать легко, здесь.

Windows

11 июля 2019 г.

Вы можете задаться вопросом, как открыть Notepad ++ в новом экземпляре. По умолчанию любой новый документ будет открываться в новой вкладке.

CSS3

13 января 2019 г.

В этом уроке вы узнаете, как разместить знак валюты внутри текстового поля.

Популярные веб-инструменты

Веб-инструменты

27 июля 2017 г.

Позволяет удалить круглые скобки, скобки или фигурные скобки из вашего текстового содержимого. У вас также есть возможность удалить содержимое внутренней упаковки. Например: «Мои категории» (1200) может быть «Мои категории 1200» или «Мои категории».

Веб-инструменты

01 июля 2014 г.

Возникают ли у вас проблемы с подключением при попытке подключения к удаленному SQL Server? Используйте наш бесплатный инструмент SQL Server Query для тестирования.

Веб-инструменты

22 декабря 2015 г.

Вам нужна помощь в преобразовании времени JSON в читаемое человеком время? Используйте наш бесплатный инструмент, чтобы помочь вам преобразовать время.

Веб-инструменты

27 января 2016 г.

Бесплатный калькулятор Google AdSense для расчета вашего дохода AdSense на основе показов страниц.

Конструктор CSS3 Matrix

Show Advanced НастройкиСкрыть дополнительные Настройки Что это? Скрыть пользовательский интерфейс Передовой

	Из	—
Точка	(, )	(, )
Точка	(-, )	(, )
Точка	(,-)	(, )
Точка	(-, -)	(, )

Я хочу использовать 3D трансформируется. Показать префиксы поставщиков Изменить HTML и CSS

Код преобразования CSS

Диаграмма

Это блочный элемент.

Это блочный элемент.

К сожалению, этот инструмент работает только в браузерах, поддержка transform-origin (который не включает любая существующая версия IE) и перетаскивание HTML5 (которое кроме Opera на данный момент). Когда я обновляю cssSandpaper с

трансформацией-происхождением polyfill, я проведу рефакторинг этого инструмента, чтобы использовать его, чтобы IE заработал. Пользователям Opera придется дождаться поддержки HTML5 Drag and Drop. в будущем.

Примечание: здесь разрешен только базовый HTML (например, без тегов Это блочный элемент.

CSS-контент /* * Не стесняйтесь редактировать любой из стилей ниже. */ /* убедитесь, что все элементы, стилизованные ниже, используют рамки */ .блок, #сетка { box-sizing: граница-коробка; } /* Объект перед преобразованием */ #o1 { фон: #ffcccc; } /* Объект после преобразования */ #о2 { фон: #ccccff; } /* Общие стили для объектов-боксов. */ .блокировать { размер шрифта: наследовать; } /* CSS для сетки */ #сетка { background: url("images/background.gif") повтор прокрутки 0 0 белый; высота: 800 пикселей; положение: родственник; переполнение: скрыто; }

Этот инструмент позволяет разработчикам создавать идеальные до пикселя CSS3 Трансформируется путем перетаскивания объектов на экране. (или заполнив форму ниже). Красная коробка - это объект до преобразования, фиолетовый - это коробка после трансформация. Вы можете перетаскивать красную рамку, а также измените его размер с помощью виджета изменения размера в правом нижнем углу угол. Вы также можете преобразовать зеленый объект, перетащив три контрольные точки вокруг сетки.

Сделали ошибку? Щелкните в своем браузере Кнопка назад!

Хотите поделиться своим творением? Поделитесь полным URL! Хэштег содержит все данные вашего макета с использованием сжатия LZW)

Примеры

• HTML-элемент, наложенный на ретро-экран телевизора.
• Живой текст перед зданием
• Анимированный текст внутри плаката Родченко.
• Размытый текст (с использованием тени текста CSS) на дороге от быстро движущегося автомобиля.

  No related posts.