0

Въртящи се в кръг изображения

 изображения
Здравейте, приятели! Отново сме на тематика изображения. Днес ще споделя как с помощта на CSS да си направим въртящи се изображения. Често този ефект се използва, за да се предаде оригиналност на изображения, така че когато курсорът е върху тях те да се въртят. Може да се приложи абсолютно за всяко изображение. А ако свържете тези изображения с хипервръзка, кликането върху тях ще отведе до предварително избрана от вас страница. Аз ви предлагам три варианта на въртящи се изображения. Изберете по вашия вкус и според вашата необходимост.

Първи вариант


Въртене на изображенията на 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="адрес на изображението" /></div>

➤Без хипервръзка


<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">
<img src="адрес на изображението" /></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="адрес на изображението" /></a>
</div>


➤И без такава хипервръзка


<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">
<img src="адрес на изображението" /></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="адрес на изображението" /></a>
</div>


➤И без такава хипервръзка


<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">
<img src="адрес на изображението" /></div>




Както виждате, със син цвят е маркиран адресът на страницата, към която ще води хипервръзката. И в червено е адресът на самото изображение.








Въртящите изображения могат да бъдат и различен брой. За да го промените допълнете в кода ето този фрагмент за изображения – хипервръзки толкова пъти, колкото изображение искате да имате.

<a href="адрес на страницата">
<img src="адрес на изображението" /></a>



И за изображенията без хипервръзки, съответно


<img src="адрес на изображението" /></div>



Размерите на изображенията могат да бъдат различни, каквито са ви нужни. Впишете избрания от вас код направо в HTML редактора на публикацията или в притурка HTML/JavaSkript.

Ако имате въпроси, пишете. Мисля, че и тук можете да приложите вашето въображение.

Доскоро!

Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита