Главная
Друзья!
Мы находимся в процессе большой чистки!
Возможны ошибки и кривизна страниц
Просмотреть всё и быстро не возможно!
Если нашли какую-то ошибку, то если вам не трудно напишите здесь адрес...
Сейчас вы здесь :
http://dwweb.ru/page/css/016_effekt_povorot_foto_css.html

Эффект поворот фото css

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="http://dwweb.ru/__a-data/FOTO/Site/CSS/strombus_korolevskiy.png" alt="Пример эффекта поворота" title="Пример эффекта поворота">

Результат:

Пример эффекта поворота