| Kosten | Пятница, 16 Февраля 2018, 23:43 | Сообщение 1 |
| Стили CSS преобразования позволяют применять набор изменений, называемых преобразованиями к любому элементу. Преобразования реализуются с использованием свойств преобразования transform-origin и transform. Свойство transform-origin используется для установки источника элемента. Если не указано значение источник устанавливается в центр элемента преобразования свойство используется для применения фактических преобразований к элементу.
Значения, которые принимает свойство преобразования, это поворот, масштабирование, перевод, перекос и матрица. Значение «none» означает, что никакое преобразование не должно выполняться. Когда элемент преобразуется в CSS окружающие элементы и документ не затрагиваются. Поэтому применение преобразований к поплавкам невозможно, так как другие элементы в документе не будут повторно настраиваться в ответ на действие преобразования. Формат 2D и 3D преобразования возможны в CSS.
Форматы 2D просты в реализации и несколько примеров показаны ниже. Однако 3D преобразования требуют немного больших усилий. Чтобы сначала использовать 3D, должна быть установлена перспектива, которая контролирует, насколько глубоко или близко пользователь просматривает 3D. После этого преобразование может быть применено к элементу. Полный список всех преобразований CSS можно найти здесь.
Однако, как уже упоминалось, этот модуль все еще находится на ранней стадии, поэтому, если вы примените эти методы на своем следующем веб-сайте, убедитесь, что он грамотно деградирует для несовместимых браузеров. Преобразования 2D на CSS используются для изменения структуры элемента в виде перевода, поворота, масштабирования и перекоса и так далее.
Ниже приведен список методов двумерных преобразований:
translate (x, y): используется для преобразования элемента вдоль оси X и оси Y.
translateX (n): используется для преобразования элемента вдоль оси X.
translateY (n): используется для преобразования элемента вдоль оси Y.
rotate (): он используется для поворота элемента на основе угла.
scale (x, y): используется для изменения ширины и высоты элемента.
scaleX (n): используется для изменения ширины элемента.
scaleY (n): Используется для изменения высоты элемента.
skewX (): Он определяет косые преобразования вместе с осью X.
skewY (): Определяет косые преобразования вместе с осью Y.
matrix (): Определяет матричные преобразования.
2D-преобразования
Ниже приведены примеры двумерных преобразований. Чтобы проверить какой-либо код, скопируйте и вставьте этот код в редакторе и измените свойство преобразования на то, что показано в каждом примере ниже.
Это исходное изображение, которому будут применены преобразования.
Повернуть:
Как следует из названия, это вращение позволяет поворачивать изображение на определенное количество градусов. Изображение ниже поворачивается на 35 градусов. Положительные значения поворачивают изображение по часовой стрелке, а отрицательные значения поворачивают изображение против часовой стрелки.
HTML
Код <!DOCTYPE html> <html> <body> <img src="http://zornet.ru/Aben/Y8T6jA2WQ1qKspPddRTyAQ.png" border="0" alt="ZorNet: Создание сайта на uCoz" style="width:130px;"> </body> </html>
CSS
Код img { transform:rotate(35deg);}
Свойство CSS позволяет вам вращать, масштабировать, перекосить или переводить данный элемент. Это достигается путем изменения координатного пространства модели визуального форматирования.
Демонстрация:
Масштабно:
Шкала используется для изменения размера изображения. Он может принимать одно значение или два значения. Шкала записи (10) увеличит изображение в десять раз по сравнению с исходным размером. Однако масштаб записи (0,5, 1.12), как показано ниже, уменьшит ширину в 0,5 раза и увеличит высоту в 1,12 раза. Результирующий эффект, это растянутое изображение.
Код img { transform:scale(0.5,1.12);}
Наклонение:
Здесь задаем наклоняет изображение в то или иное направления. Как вы можете видеть ниже, изображение наклоняется влево после того, как к нему будет применен переход на 20 градусов в направлении.
Код img { transform:skewX(5deg);}
Матричным:
Свойство матрицы позволяет применить все преобразования сразу. Он принимает шесть значений, если есть значение для которого вы не хотите, чтобы преобразование просто положило значение 0 для этого преобразования.
Код img { transform: matrix(0, 1.2, 0.4, 0.3,0,50);}
Поддержка браузера:
Также в режиме демонстраций, можете посмотреть другие элементы.
Демонстрация:
3D-преобразования
Применение трехмерных преобразований требует дополнительной задачи добавления перспектив. Перспектива превращает пространство в трехмерное пространство. 3D-преобразование позволяет поворачивать, масштабировать, перекосить и переводить на оси X, Y и Z. Чем меньше значение перспективы, тем более драматичный эффект. Это показано в следующем примере. Ниже изображения поворачивается на 55 градусов вокруг оси X и Y сперва на 100 пикселей, а затем на 50 пикселей.
Код perspective(100px) rotateX(55deg)
Код perspective(100px) rotateY(55deg)
Код perspective(50px) rotateX(55deg)
Код perspective(50px) rotateY(55deg)
Вывод:
CSS преобразования позволяют поворачивать, перекосить, масштабировать и переводить элементы. Любой элемент может быть преобразован, включая текст, изображения, фоновые изображения и многое другое. Преобразования CSS также могут быть анимированные. 2D и 3D-преобразования могут быть реализованы в большинстве современных браузеров. Префиксы -webkit и -moz доступны для выполнения преобразований в Chrome и Firefox.
| | Страна: (RU) |
| |
