Оригинальный эффект вращения изображений для сайта

День добрый дорогие строители сайтов,сегодня мы рассмотрим отличную вращательную галерею для сайта ucoz,в которую можно вставить изображения любого разрешения и оно благополучно установиться в определенных размерах у Вас на сайте. 

Ну что же столько разговоров,дайте как поближе рассмотрим наш скрипт оригинального вращения изображения для сайта ucoz. 
А начнем мы конечно же с установки,которая замет не меньше минуты. 
Данный скрипт устанавливаем туда,где хотим видеть вращательную галерею:

<style> .dsblockeffect { width:350px; height:230px; margin:250px 0; -webkit-perspective:1200px; perspective:1200px; } .dsblockeffect-rotate { width:350px; height:230px; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform: translate3d(0,0,-700px); -webkit-perspective:1200px; transform: translate3d(0,0,-700px); perspective:1200px; } .dsblockeffect-rotate img { width:350px; height:230px; position:absolute; left:0; top:0; perspective:1200px; } .frame1 { -webkit-animation:ds-img-rotate1 10s infinite linear; animation:ds-img-rotate1 10s infinite linear; } .frame2 { -webkit-animation:ds-img-rotate2 10s infinite linear; animation:ds-img-rotate2 10s infinite linear; } .frame3 { -webkit-animation:ds-img-rotate3 10s infinite linear; animation:ds-img-rotate3 10s infinite linear; } .frame4 { -webkit-animation:ds-img-rotate4 10s infinite linear; animation:ds-img-rotate4 10s infinite linear; } .frame5 { -webkit-animation:ds-img-rotate5 10s infinite linear; animation:ds-img-rotate5 10s infinite linear; } .frame6 { -webkit-animation:ds-img-rotate6 10s infinite linear; animation:ds-img-rotate6 10s infinite linear; } .frame7 { -webkit-animation:ds-img-rotate7 10s infinite linear; animation:ds-img-rotate7 10s infinite linear; } .frame8 { -webkit-animation:ds-img-rotate8 10s infinite linear; animation:ds-img-rotate8 10s infinite linear; } .frame9 { -webkit-animation:ds-img-rotate9 10s infinite linear; animation:ds-img-rotate9 10s infinite linear; } @-webkit-keyframes ds-img-rotate1 { 0% {-webkit-transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); opacity:1;} 55% {opacity:0.5;} 100% {-webkit-transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); opacity:1;} } @-webkit-keyframes ds-img-rotate2 { 0% {-webkit-transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); opacity:0.9;} 44% {opacity:0.5;} 88% {opacity:1;} 100% {-webkit-transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); opacity:0.9;} } @-webkit-keyframes ds-img-rotate3 { 0% {-webkit-transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); opacity:0.8;} 33% {opacity:0.5;} 77% {opacity:1;} 100% {-webkit-transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); opacity:0.8;} } @-webkit-keyframes ds-img-rotate4 { 0% {-webkit-transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); opacity:0.7;} 22% {opacity:0.5;} 66% {opacity:1;} 100% {-webkit-transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); opacity:0.7;} } @-webkit-keyframes ds-img-rotate5 { 0% {-webkit-transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); opacity:0.6;} 11% {opacity:0.5;} 55% {opacity:1;} 100% {-webkit-transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); opacity:0.6;} } @-webkit-keyframes ds-img-rotate6 { 0% {-webkit-transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); opacity:0.6;} 44% {opacity:1;} 100% {-webkit-transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); opacity:0.6;} } @-webkit-keyframes ds-img-rotate7 { 0% {-webkit-transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); opacity:0.7;} 33% {opacity:1;} 88% {opacity:0.5;} 100% {-webkit-transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); opacity:0.7;} } @-webkit-keyframes ds-img-rotate8 { 0% {-webkit-transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); opacity:0.8;} 22% {opacity:1;} 77% {opacity:0.5;} 100% {-webkit-transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); opacity:0.8;} } @-webkit-keyframes ds-img-rotate9 { 0% {-webkit-transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); opacity:0.9;} 11% {opacity:1;} 66% {opacity:0.5;} 100% {-webkit-transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); opacity:0.9;} } @keyframes ds-img-rotate1 { 0% {transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); z-index:10; opacity:1;} 11% {opacity:1; z-index:10;} 55% {opacity:0.6; z-index:6;} 100% {transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); z-index:10; opacity:1;} } @keyframes ds-img-rotate2 { 0% {transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); z-index:9; opacity:0.9;} 44% {opacity:0.5; z-index:6;} 88% {opacity:1; z-index:10;} 100% {transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); z-index:9; opacity:0.9;} } @keyframes ds-img-rotate3 { 0% {transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); z-index:8; opacity:0.8;} 33% {opacity:0.5; z-index:6;} 77% {opacity:1; z-index:10;} 100% {transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); z-index:8; opacity:0.8;} } @keyframes ds-img-rotate4 { 0% {transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); z-index:7; opacity:0.7;} 22% {opacity:0.5; z-index:6;} 66% {opacity:1; z-index:10;} 100% {transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); z-index:7; opacity:0.7;} } @keyframes ds-img-rotate5 { 0% {transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); z-index:6; opacity:0.6;} 11% {opacity:0.5; z-index:6;} 55% {opacity:1; z-index:10;} 100% {transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); z-index:6; opacity:0.6;} } @keyframes ds-img-rotate6 { 0% {transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); z-index:6; opacity:0.6;} 44% {opacity:1; z-index:10;} 88% {opacity:0.5; z-index:6;} 100% {transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); z-index:6; opacity:0.6;} } @keyframes ds-img-rotate7 { 0% {transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); z-index:7; opacity:0.7;} 33% {opacity:1; z-index:10;} 77% {opacity:0.5; z-index:6;} 100% {transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); z-index:7; opacity:0.7;} } @keyframes ds-img-rotate8 { 0% {transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); z-index:8; opacity:0.8;} 22% {opacity:1; z-index:10;} 66% {opacity:0.5; z-index:6;} 100% {transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); z-index:8; opacity:0.8;} } @keyframes ds-img-rotate9 { 0% {transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); z-index:9; opacity:0.9;} 11% {opacity:1; z-index:10;} 55% {opacity:0.5; z-index:6;} 100% {transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); z-index:9; opacity:0.9;} } </style> <div class="dsblockeffect"> <div class="dsblockeffect-rotate"> <img class="frame1" src="http://ru.best-wallpaper.net/wallpaper/1024x768/1312/England-London-evening-dusk-lights-bridge-river-buildings_1024x768.jpg" alt=""> <img class="frame2" src="http://ru.best-wallpaper.net/wallpaper/1280x1024/1305/San-Francisco-California-USA-city-bay-evening-sky-skyscrapers-lights_1280x1024.jpg" alt=""> <img class="frame3" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_3.jpg" alt=""> <img class="frame4" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_4.jpg" alt=""> <img class="frame5" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_5.jpg" alt=""> <img class="frame6" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_6.jpg" alt=""> <img class="frame7" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_7.jpg" alt=""> <img class="frame8" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_8.jpg" alt=""> <img class="frame9" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_9.jpg" alt=""> </div> </div>
Что по-поводу изменений,так можно редактировать практически всё,начиная с размера вращающейся галерею и до скорости вращения. Скрипт *Оригинальный эффект вращения изображений для сайта ucoz* Размер общей картинки редактируется в поле: 

-webkit-perspective:720px;
 perspective:720px;