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

Здравейте, приятели! Отново сме на тематика изображения. Днес ще споделя как с помощта на 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.

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

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: