| | | | | |
Эффект поворот фото css
2018/06/10
Марат
561
0
CSS |
Нам нужен был эффект поворота фото. И можно было бы поломать голову и самому написать такой эффект поворота фото на css.
Но когда уже есть готовое решение в интернете. То странно вообще тратить на это время!
Но поскольку все запомнить невозможно и рейтинг страниц и публикаций изменяется и найти потом бывает практически невозможно, что ты нашел, кроме тех случаев, когда это было занесено в закладки! Но и закладки – это путь такой… потом столько всего в закладках, что понимаешь, что наступил хаос!
А у нас есть свой сайт, и я периодически пишу здесь то, что было бы интересно вам! И сам прихожу на свой сайт помня, что вроде бы я уже делал такую страницу на тему поворота!
Но хватит молоть воду!
Давай эффект!
Нужна какая-то маленькая фотография, чтобы её можно было повернуть прямо в тексте, и чтобы не сломалась вся страница.
Вчера, как раз я писал
о королевском стромбусе – возьмем маленькую фотографию это ракушки и продемонстрируем данный эффект поворота фото через css.
Код:
.povorot img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
. povorot img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Применение:
<div class="povorot"><img src="https://dwweb.ru/__a-data/FOTO/Site/CSS/strombus_korolevskiy.png" alt="Пример эффекта поворота" title="Пример эффекта поворота">
Результат:
С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
поворот фото cssэффект поворот фото cssповернуть фото на несколько градусовКак повернуть фото в css