![Въртящи се изображения изображения](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcyGwVNTmr-O5NdtRBog7n7uBw9LxU3pjZFpFGpRnSwETBkjr8MFOwt9T3eoryZBbDGLKXVlD-A1Df-5UtSkUo3BFLB4oUWkfq4XbJ3gfS3M_Seh8NsGK-oS0A1RprF4IquWuG-KQUt7g/s1600/krug.png)
А ако свържете тези изображения с хипервръзка, кликането върху тях ще отведе до предварително избрана от вас страница. Аз ви предлагам три варианта на въртящи се изображения. Изберете по вашия вкус и според вашата необходимост.
Първи вариант
Въртене на изображенията на 360 градуса
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJiPGVbuf-Idv34ZInas7nuVlVUmlTaDoWLbmmdKuQD8mQBRAQxjAmQS-up36NZN6dIvHWNzI7z9SjuLOSw8Ov1zhVLkEMecTYMRLuvZguxVn2Kes8adzoFzc25R_UTCiRTv67CoMRnM/h120/izobr1_1.jpg)
➤С хипервръзка, водеща към желана от вас страница
<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">
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>
<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>
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 градуса
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbT-YfxCIjawfYG23cHSwv-hJD6oquodV023LP0Nea731PQhyj-zt-Yd1jGtjvwcGbHTlS9cb07aozVil7xcT8Xk6ATN52rSooN-oOmtaYfWkK5v5LkPKUKUI3WfqOEgmbI3dT1Z1vCxs/h120/izobr2_1.jpg)
➤С хипервръзка, водеща към желана от вас страница
<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>
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>
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 градуса
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXq7HqFanoNhnyK6bq9kQw95y5tDkw_o02uIOKU7E92x0CK1y72OJUhiH2_MEsXGun68VxU_RWl2EuzdYrlX1uuJPGaEH-Xl1MlSED5G01-AUtbLmfhUnRSfX2MivMU_PjWgOPg-wipDE/h120/izobr3_1.jpg)
➤С хипервръзка, водеща към желана от вас страница
<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>
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>
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>
Както виждате, със син цвят е маркиран адресът на страницата, към която ще води хипервръзката. И в червено е адресът на самото изображение.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXq7HqFanoNhnyK6bq9kQw95y5tDkw_o02uIOKU7E92x0CK1y72OJUhiH2_MEsXGun68VxU_RWl2EuzdYrlX1uuJPGaEH-Xl1MlSED5G01-AUtbLmfhUnRSfX2MivMU_PjWgOPg-wipDE/h120/izobr3_1.jpg
)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIz-8gScP4E2yahOVIsijw5C0YhY5njlf1iZbepP5yKbi2ombea12IGrOIiwVM3UeyeCKCZCLwlxVmIHoSuZsC8nhQ2kuRP_OQwE6pZyHVzQTdy5RygIz5QTp9KxAkWF-FihxdfxCn9M/h120/izobr4_1.jpg
)
Въртящите изображения могат да бъдат и различен брой. За да го промените допълнете в кода ето този фрагмент за изображения – хипервръзки толкова пъти, колкото изображение искате да имате.
<a href="адрес на страницата">
<img src="адрес на изображението" /></a>
<img src="адрес на изображението" /></a>
И за изображенията без хипервръзки, съответно
<img src="адрес на изображението" /></div>
Размерите на изображенията могат да бъдат различни, каквито са ви нужни. Впишете избрания от вас код направо в HTML редактора на публикацията или в притурка HTML/JavaSkript.
Ако имате въпроси, пишете. Мисля, че и тук можете да приложите вашето въображение.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)
Няма коментари:
Публикуване на коментар