Вращающиеся изображения

Question

Просто интересно, может ли кто-нибудь помочь мне написать следующее:

Я хочу использовать эффект затухания для поворота серии изображений (всего 7) в CSS и код, уже определенный ниже:

<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>


<div class="rotate">
    <span>
        <a href="#">
            <img border="0" src="catimage.jpg" width="160" height="160" alt="" class="" />
        </a>
    </span>
    <div onclick="javascript:document.location.href='/';">
        <a href="/"></a>
    </div>
</div>

Может кто-нибудь, пожалуйста, помогите мне кодировать это.

Большое спасибо

Answer 1

Попробуйте расширение jQuery Rotate. Похоже, это то, что вы ищете.

http://code.google.com/p/jquery-rotate/

Answer 2

Я обнаружил этот плагин jQuery, который, очевидно, способен вращать изображения на заданный угол и работает во всех браузерах. Я не пробовал, но это отправная точка.

http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

Если вы не возражаете против того, чтобы ваш код работал только в браузерах webkit, вращение можно выполнить только в CSS, используя переход CSS. Вот демоверсия с кодом:

http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Answer 3

Вы можете сделать вращение с помощью CSS. Хорошей новостью является то, что он работает практически в каждом веб-браузере. Плохая новость заключается в том, что это в значительной степени браузер за браузером, так что требуется немало кода! Например, чтобы повернуть элемент на 45 градусов, вы должны сделать что-то вроде этого:

-ms-transform: rotate(45deg); /* IE9 */
-moz-transform: rotate(45deg);  /* FF3.5+ */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
transform: rotate(45deg);  /* plain CSS3 (for when it gets supported) */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

Вы заметите, что версии MS используют причудливые числа вместо градусов. Это (я считаю) радианы. Вам нужно будет конвертировать между ними для любых значений, которые вы хотите использовать.

В любом случае, после того, как вы с этим справитесь, (относительно) легко использовать Javascript (или JQuery) для изменения стилей во время выполнения и анимации вращения.

Наслаждайтесь.

Answer 4

это скорее комбо-вопрос.если вы сделаете свой собственный ресурс (слушатель ajax) для использования php function.imagerotate , вы быстро решите свою собственную проблему.