Вращение по кругу изображение на CSS3
 | |
| Теперь при помощи CSS3 вы сможете осуществить вращение изображение. Которое будет разбита на градусы, это 360, 180 и также 90, что можете выбрать какой эффект вам нужен на сайте. Вам ниже будут представлены все варианты и также демонстрация на них, чтоб поняли как работает. Вы также можете под каждую картинку прописать ссылку и из этого можно сделать красивую тему. Вы ставите тот или иной скрин, который явно будет по тематике и пользователь зная, какая тема будет, может перейти и плюс с красивым эффектом поворота. Все будет приставлено и также скрипт под каждый многогранный эффект. И так начнем: Для поворота на 360 градусов  Код <style> div#rotateimg360 img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } div#rotateimg360 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <div id="rotateimg360"> <a href="/"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/secret-smile-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/big-smile-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/haha-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/super-man-icon.png" /></a> </div>  Скрипт на поворот 180 градусов  Код <style> div#rotateimg180 img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } div#rotateimg180 img:hover { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } </style> <div id="rotateimg180"> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/dog-boxer-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/dog-haski-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/dog-pug-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/dog-saint-bernard-icon.png" /></a> </div> Поворот на 90 градусов  Код <style> div#rotateimg90 img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } div#rotateimg90 img:hover { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } </style> <div id="rotateimg90"> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/heeeeyyy-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/wink-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/omg-icon.png" /></a> <a href="#"> <img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/oh-shit-icon.png" /></a> </div> Как было сказано, все это можно применить как переход на другую страницу, само изображение может как малое по объему быть как большое, все здесь зависит от вас. Так что возможно такой код многим понравится и его нужно ставить в HTML коде в самом материале, и получится оригинально. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
