» »

Вращение по кругу изображение на CSS3


Вращение по кругу изображение на CSS3

Теперь при помощи CSS3 вы сможете осуществить вращение изображение. Которое будет разбита на градусы, это 360, 180 и также 90, что можете выбрать какой эффект вам нужен на сайте. Вам ниже будут представлены все варианты и также демонстрация на них, чтоб поняли как работает. Вы также можете под каждую картинку прописать ссылку и из этого можно сделать красивую тему. Вы ставите тот или иной скрин, который явно будет по тематике и пользователь зная, какая тема будет, может перейти и плюс с красивым эффектом поворота. Все будет приставлено и также скрипт под каждый многогранный эффект.

И так начнем:

Для поворота на 360 градусов

Для поворота на 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 градусов

Скрипт на поворот 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 градусов

Поворот на 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 коде в самом материале, и получится оригинально.
17.05.2016 Просмотров: 487 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
feliksteg
feliksteg 18.05.2016 06:021
0
Придумано и выплатили красиво, но вот одно, пригодиться ли, можно поставить, но явно не такие большие изображение.
Kosten
Kosten 18.05.2016 06:492
0
Просто залил, как рабочий материал, и его можно смело применить функциональности сайта и возможно дизайн.
FeStemBer
FeStemBer 19.05.2016 11:233
0
Здесь нужно понимать, что основа - это ссылка, по которой переходишь, а что с эффектом, то простая такая замануха, возможно и дизайн где то.
avatar