СКРИПТЫ
ТЕГИ:
php (328)
js (243)
html (147)
css (130)
html tags (63)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
form html (30)
online (28)
fonts (26)
Показать еще :
link (26)
ruweb.net (25)
foto (22)
atom (20)
php file (20)
forum (19)
input (18)
hosting (18)
svg (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
js events (14)
js url (14)
img (14)
js time (14)
osclass (13)
info (13)
htaccess (13)
select (13)
notepad (13)
знак (12)
php img (12)
keyboard (12)
dw block (12)
table (12)
download (12)
php path (12)
form (11)
jsphp (11)
icon (11)
mouse (10)
js delete (10)
keyframes (10)
yandex (10)
hover (9)
dosite (8)
cookie (7)
php url (7)
browser (7)
comment (7)
click (6)
iframe (6)
canvas (6)
mysql (6)
list (6)
php get (6)
chart (5)
js id (5)
js math (5)
adminka (5)
mb (5)
reg.ru (5)
value (5)
ftp (5)
year (5)
search (5)
heading (5)
tag a (5)
php var (4)
нок (4)
bbcode (4)
xml (4)
base64 (4)
week (4)
ssl (4)
flags (4)
scandir (4)
games (4)
day (4)
task (4)
vk (4)
symbols (4)
js form (4)
pages (4)
month (4)
console (4)
submit (4)
money (3)
js post (3)
vs code (3)
domen (3)
https (3)
js hash (3)
line (3)
js img (3)
captcha (3)
ucoz (3)
padding (3)
numbers (3)
куб (3)
sitemap (2)
js vars (2)
seo (2)
tag hr (2)
youtube (2)
video (2)
counter (2)
arrows (2)
qr kod (2)
рся (2)
prompt (2)
google (2)
height (2)
typeof (2)
details (2)
smile (1)
нод (1)
rutube (1)
cursor (1)
windows (1)
jino (1)
archive (1)
header (1)
scroll (1)
speed (1)

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

2018/06/10 Марат 99 0 css | hover | foto |

Нам нужен был эффект поворота фото. И можно было бы поломать голову и самому написать такой эффект поворота фото на 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/__img/Site/CSS/strombus_korolevskiy.png" alt="Пример эффекта поворота" title="Пример эффекта поворота">

Результат:


Пример эффекта поворота
Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
поворот фото css
эффект поворот фото css
повернуть фото на несколько градусов
Как повернуть фото в css
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
28.11.2023 12:13
Спасибо за добрые слова! P.S. Ваше сообщение... необычным образом было записано так, что не передался адрес…
подробнее.
Макс :
26.11.2023 08:38
Здравствуйте! Даже для человека весьма далёкого все описано более чем доходчиво. Я только учусь понимать…
подробнее.
Марат :
08.10.2023 16:21
Приведите пример пожалуйста!!!
подробнее.
kelvin phitrow :
08.10.2023 16:16
Ничего не написано про двойное сравнение. То есть когда переменную надо сравнить с двумя числами, если она…
подробнее.
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.026857 секунд. Подробнее