Всем привет. Чтобы придать немного интерактивности или точнее живности элементам на странице сайта в современном веб-пространстве частенько используются различные анимационные эффекты. В данной заметке мы рассмотрим один из таких примеров. Использование подобного эффекта скорее всего вам уже приходилось наблюдать – при наведении курсора мыши, элемент начинает вращаться. Посредством использования transition и transform в CSS3 реализовать подобный эффект довольно просто, давайте рассмотрим, как это делается. В качестве самого элемента мы будем использовать изображение. Первым делом следует разместить изображение в теле документа страницы:
После этого, сами эффекты мы прописываем в CSS:
Свойство transition является уникальным, и позволяет устанавливать эффект перехода между двумя состояниями элемента, которые в данном примере определены в виде псевдоэлемента :hover (наведение курсора на элемент). Цикл вращения задается посредством «rotate» где и указывается величина в градусах, т.е. 360 градусов (полный оборот). Скорость вращения элемента задана в стилях элемента img – обратите внимание на значение «.8s», изменяя это значение вы можете подстроить нужную вам скорость анимации.
Кстати, можно заставить вращаться элемент бесконечно, без воздействия пользователя. Как сделать бесконечную анимацию вращения на CSS читайте в этой статье.
Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.
Красивое вращение картинки при наведении CSS
С помощью этого эффекта можно добиться красивого вращения картинки при наведении, для этого используем свойство transform. Такой эффект можно использовать для галереи, или для того, чтобы привлечь внимание к определенному элементу на сайте.
Этот эффект можно использовать не только для того чтобы повернуть изображение, при повороте можно вставить на обратную сторону текст или другую картинку, либо отразить по горизонтали исходное изображение, как на примере, что бы картинка разворачивалась.
С помощью этого эффекта можно поворачивать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.
Пример
HTML
CSS
img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >
Вращение картинки при наведении CSS
С помощью этого эффекта можно вращать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.
Пример
HTML
CSS
img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >
Рамка внутри блока или картинки при наведении
Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
Пример
HTML
CSS
Рамка к изображению при наведении
Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.
Пример
HTML
CSS
Эффект при наведении на картинку с текстом CSS
Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.
Пример
HTML
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.
Пример
HTML
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение.
В общем виде свойство transform записывается так: transform: функция(значение); , где функция — это тип преобразования, который вы хотите применить, а значение — параметры этого преобразования.
Свойство transform может принимать следующие значения:
none — никакого преобразования не применяется.
rotate(angle) — вращает элемент на заданный угол.
scale(x,y) — масштабирует элемент по осям X и Y.
translate(x,y) — перемещает элемент на заданные координаты.
skew(x-angle,y-angle) — наклоняет элемент на заданные углы по осям X и Y.
Есть некоторые другие варианты преобразований, например, на основе матриц — смотрите их в спецификации. Но они для математиков всяких 🙂
Примеры использования
Вращение элемента — rotate
Свойство rotate вращает элемент вокруг его центра.
В этом примере элемент повернётся на 20 градусов по часовой стрелке (оси вы не увидите).
Масштабирование элемента — scale
Свойство scale изменяет размер элемента.
Обратите внимание, при масштабировании изменяются все параметры элемента — например, рамка становится в полтора раза толще.
Перемещение элемента — translate
Свойство translate позволяет вам перемещать элемент по экрану.
Наклон элемента — skew
Свойство skew позволяет вам наклонять элемент по осям X и Y — как если бы вы нажимали на его углы.
Анимация превращений
Логично, что такую красоту используют для анимаций. transform легко анимируется с помощью свойства transition или ключевых кадров ( @keyframes ).
Анимация с помощью transition
Свойство transition позволяет анимировать плавное изменение свойств CSS от одного состояния к другому за определённое время. Вот пример анимации сдвига элемента при наведении курсора.
В этом примере, когда вы наводите курсор на , он очень по-дизайнерски изгибается. Смотрите:
Анимация с помощью @keyframes
Свойство @keyframes позволяет вам создавать более сложные анимации из нескольких частей. Вот пример анимации, где элемент сначала увеличивается в размере, затем вращается и сдвигается:
Выходит, с помощью transform вы можете вращать, масштабировать, перемещать и наклонять элементы, а также применять более сложные преобразования с помощью матриц. Свойство transition помогает анимировать эти эффекты. Главное — не переборщить.
transform не должен использоваться для изменения основной структуры веб-страницы. Он нужен для создания эффектов и анимаций, а не для основного макета страницы
Например, если вы захотите расставить элементы на странице с помощью translate , то лучше не надо. Для этого лучше использовать другие CSS свойства, такие как flexbox или grid .
CSS свойство transform позволяет применять 2D и 3D преобразования к элементам.
С помощью transform можно вращать, масштабировать, перемещать и наклонять элементы.
Не все CSS свойства могут быть преобразованы с помощью transform .
Вместе с transition получаются неплохие анимации. Главное — знать меру.
Материалы по теме
Плавные трансформации на чистом CSS — свойство transition
Состояния элементов, чтобы анимировать не только при наведении курсора
Как анимация портит ваши сайты — помните, что иногда анимаций бывает слишком много
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
