В этой статье мы разберемся с преобразованием в подробно, а затем проведите подробную практическую демонстрацию. Следующие указатели будут рассмотрены в этой статье,
С развитием функциональности веб-сайта не менее важно обеспечить умную интеграцию на вашем веб-сайте, чтобы сделать его привлекательным и лучше. Добавление различных элементов CSS, дополняющих ваш сайт, - это необходимость часа.
Люди держатся подальше от веб-сайтов, которые не особо привлекают массы. Итак, как насчет попытки трансформировать некоторые элементы и украсить ваш CSS меньшим значением сжатия.
Чтобы удовлетворить аналогичные потребности, у нас есть свойство CSS transform, которое преобразует элементы путем их наклона, поворота, масштабирования или перемещения.
Продолжаем статью о преобразовании в CSS
Что такое преобразование CSS?
Преобразование элемента CSS означает придание ему края в 2D или 3D форме. Визуально меняет стиль элемента.
2D-трансформация работает по осям X и Y. Вы можете предоставить любую кромку или структуру на обеих осях для внесения изменений. В то время как для трехмерного преобразования он должен работать по осям X, Y, а также Z, чтобы обеспечить необходимую глубину.
Свойства преобразования CSS 2D:
| Функция | Описание |
матрица ( п, п, п, п, п, п ) | Матрица шести значений |
перевести( х, у ) | Позволяет элементу перемещаться по осям X и Y |
translateX ( п ) | Позволяет элементу перемещаться по оси X |
translateY ( п ) | Позволяет элементу перемещаться по оси Y |
масштаб( х, у ) | Изменяет ширину и высоту элементов |
scaleX ( п ) | Изменяет ширину элемента |
scaleY ( п ) | Изменяет высоту элементов |
повернуть ( угол ) | Позволяет повернуть элемент на угол, указанный в параметре |
перекос ( x-угол, y-угол ) | Наклоняет элемент по осям X и Y |
skewX ( угол ) что такое вектор в Java | Наклоняет элемент по оси X |
skewY ( угол ) | Наклоняет элемент по оси Y |
Свойства преобразования CSS 3D:
Свойство | Описание |
преобразовать | Применяет к элементу преобразование 2D или 3D |
трансформация происхождения | Позволяет изменять положение трансформируемых элементов |
стиль трансформации | Определяет, как вложенные элементы отображаются в трехмерном пространстве |
перспектива | Определяет перспективу просмотра 3D-элементов |
перспектива происхождения | Определяет нижнее положение 3D-элементов |
обратная видимость | Определяет, должен ли элемент быть видимым, когда он не обращен к экрану |
Например:
css .element {ширина: 20 пикселей высота: 20 пикселей преобразование: масштаб (20)}Теперь, когда вы это сделаете, определенный элемент будет увеличен в 20 раз.
Не только это, вы также можете масштабировать по оси для горизонтального и вертикального масштабирования.
преобразование: scaleX (2) преобразование: scaleY (.5)
Чтобы обеспечить правильное преобразование во всех браузерах, вы можете:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Свойство CSS transform улучшает координатное пространство уровня визуального форматирования CSS.
Что такое уровень визуального форматирования?
Уровень визуального форматирования означает обработку документа и визуальное представление его на медиа-платформах. С помощью визуального форматирования вы можете преобразовать каждый элемент как модель, соответствующую блочной модели CSS. Модель блока CSS определяет элемент в стандартном формате прямоугольного блока, определяя размер, положение и свойства.
Заметка: Трансформировать можно только трансформируемые элементы.
Продолжаем статью о преобразовании в CSS
Каковы различные свойства преобразования?
Давайте посмотрим на все трансформирующие свойства:
1. масштаб (): Масштабирование означает изменение размера элемента по горизонтали или вертикали.
Для вертикального масштабирования:scaleX
Для горизонтального масштабирования:scaleY
Для элемента вы также можете изменить размер шрифта, отступ, высоту или ширину. Значение по умолчанию - 1, что также означает предоставление 0,5, поскольку значение уменьшает его вдвое, а значение 2 увеличивает масштаб вдвое.
2. skew (): Свойство Skew позволяет пользователю наклонять элемент вправо или влево от одной координатной точки. Это почти как превратить прямоугольник в параллелограмм. Вы можете наклонить элемент по его координатам.
Пример:
.element {преобразование: skewX (25deg)} .element {преобразование: skewY (25deg)При этом элемент наклоняется на 25 градусов по горизонтали и вертикали с помощью skewX или skewY.
3. повернуть ( ) : Вы можете вращать элемент по часовой стрелке, используя это свойство. Вы можете повернуть его на 180 или 360 градусов, чтобы вернуть на исходное место.
.element {transform: rotate (25deg)}Для обеспечения вращения вы также можете использовать любое из трех измерений: rotateX, rotateY или rotateZ.
4. перевести ( ) : Вы можете правильно переместить элемент вверх ногами или в сторону.
.element {transform: translate (20px, 10px)}Translate переместит указанный объект / элемент вверх ногами или в сторону. Первое указанное значение перемещает объект вправо (отрицательное значение перемещает его влево), а второе значение перемещает его вниз (указание отрицательного значения перемещает его вверх).
Если это может вас смутить, примените ось X, чтобы изменить положение элемента по горизонтали, и ось Y, чтобы изменить положение по вертикали. Самым удивительным аспектом свойства transform является то, что применение transform позволяет перемещать только элемент, оставляя все остальные элементы или текст нетронутыми. Расстояние обычно измеряется в пикселях или процентах.
Например:
.element {преобразование: translateX (значение) преобразование: translateY (значение)}5. перспектива (): вы можете обеспечить глубину перспективы элемента. Это позволяет придать элементу трехмерное преобразование, сделав его кубическим при преобразовании.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Введение оси z дает элементу трехмерную визуализацию. translateZ () перемещает элемент к зрителю, а отрицательное значение перемещает его.
6. матрица () : Объединить все преобразования в одно.
повернуть (45deg) перевести (24px, 25px)
Применение matrix () объединяет все свойства преобразования в один массив.
Применение свойств преобразования может значительно улучшить ваш элемент и, следовательно, привлекательность вашего веб-сайта. Попробуйте их!
На этом мы подошли к концу статьи о преобразовании в CSS.
Если вы хотите узнать больше о веб-разработке, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Если вам все еще интересно. Если у вас есть какие-либо вопросы, вы можете опубликовать их в разделе комментариев этого блога «Что такое CSS», и мы свяжемся с вами в ближайшее время.