Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поворот изображения! (https://javascript.ru/forum/misc/17265-povorot-izobrazheniya.html)

Severtain 12.05.2011 16:21

Поворот изображения!
 
Как повернуть изображение с помошью div и js? вроде в гуле и есть.. но не совсем то что мне нужно!
пример:
<html>
<head>
<script language="JavaScript">
var d=document;
var w=window;
</script>
function main()
{
d.getElementById('1r').style.left = 0;
d.getElementById('1').style.top = 0;
d.images['2'].src = '2.png';
}
</head>
<body onload="main()">
<div style="position:absolute; top0; left:0" id="1"><img id="2"></div>
<dinamic>
</body>
</html>

можно ли через getElementById врашать? =(

monolithed 12.05.2011 17:50

Цитата:

Сообщение от Severtain
можно ли через getElementById врашать? =(

к счастью нет :D
ротация элементов возможна только с помощью canvas или CSS3

Severtain 12.05.2011 18:21

а как через канвас сделать! ?

CSS3 наверное отпадает, так как угол наклона может именяться с каждой секундой! например вращение карты на экране!! ..

monolithed 12.05.2011 21:11

Цитата:

Сообщение от Severtain
CSS3 наверное отпадает, так как угол наклона может именяться с каждой секундой!

ну почему же:
<style type="text/css">
#div {
    background-color: red;
    margin: 30px auto;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    width: 50px;
    height: 50px;
}

#div:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
}
</style>
<div id="div"></div>


по canvas тут

Severtain 12.05.2011 21:19

Огромное спасибо! щя буду изучать))

mycoding 15.05.2011 10:40

Цитата:

Сообщение от Severtain (Сообщение 104403)
Огромное спасибо! щя буду изучать))

Советую также ознакомится вот с этим
http://www.sencha.com/products/animator/

subzey 15.05.2011 14:16

Для CSS3 трансформов в IE6+ есть вот эта библиотечка.

Severtain 15.05.2011 19:11

СSS3 не подходит т.к. его нельзя редактировать из JS файла!

dmitriymar 15.05.2011 19:27

Цитата:

Сообщение от Severtain
СSS3 не подходит т.к. его нельзя редактировать из JS файла

кто сказал?:D

Severtain 15.05.2011 19:51

мм.. а как можно?) расскажите! ) буду благодарен))
например создать поворот изображения и при этом задавать координаты из js файла!))

mycoding 15.05.2011 20:15

Цитата:

Сообщение от subzey (Сообщение 104767)
Для CSS3 трансформов в IE6+ есть вот эта библиотечка.

Ух ты, не знал.

Цитата:

Сообщение от Severtain (Сообщение 104800)
мм.. а как можно?) расскажите! ) буду благодарен))
например создать поворот изображения и при этом задавать координаты из js файла!))

Наверное нельзя.
Лучший вариант тогда это actionscript.
Вариант похуже framework Raphael. Производительность не очень.
Но работает кросс-браузерно http://raphaeljs.com/

Severtain 15.05.2011 20:46

Цитата:

Сообщение от mycoding (Сообщение 104805)

Flash? !

Меня канвас очень устравивает! Но возникла такая проблемка... когда делаю анимацию из 2-3х картинок! Они не заменяют друг друга, а ставяться сверху друг на друга! Как бы их удалять?)) если кто знает было бы супер))

dmitriymar 15.05.2011 20:52

Цитата:

Сообщение от Severtain
когда делаю анимацию из 2-3х картинок! Они не заменяют друг друга, а ставяться сверху друг на друга! Как бы их удалять?))

каждое последующее изображение становиться сверху предидущего. стирать канву-

указатель на канву.clearRect(0, 0, document.getElementById('ид канвы').offsetWidth, document.getElementById('ид канвы').offsetHeight);

Severtain 15.05.2011 20:55

dmitriymar !!!
АААА!! СРАБОТАЛО!!! ОГРОМНОЕ СПАСИБО)) Сори за капс... но оно РАБОтает! Огромное спасибо!


Часовой пояс GMT +3, время: 17:18.