Obracanie div-a o określony kąt Opcje

[batman]

Szukam skryptu/biblioteki javascript (ewentualnie informacji, że się nie da), który będzie w stanie obrócić div-a o zadany kąt. By było ciekawiej, rozwiązanie to musi działać na IE7+, Fx 3+ oraz Opera 9.6+. Oczywiście wszystko co jest w div-ie (tekst, obrazki, itd) również musi się obracać. Obrót ma być możliwy tylko względem lewego dolnego rogu.

[sowiq]

Wydaje się to niemożliwe chociażby z tego względu, że nie da się obrócić litery o kąt. Jeśli chciałbyś osiągnąć taki efekt musiałbyś składać taki obrócony element z jednopikselowych kawałków oryginału odpowiednio ułożonych. Taka operacja zużywałaby chyba zbyt dużo zasobów. Wydaje mi się, że TUTAJ jest wykorzystana podobna technika, a autor pisze:

for example, 629 [elements] for a tiny 37px x 17px image

Zastanów się nad użyciem Flash'a. Tam z podobnymi operacjami nie ma żadnego problemu, a Flash coraz lepiej obsługuje HTML (np. takie tagi jak <div />, <img /> to standard już ok kilku wersji). Do tego nie ma problemu z kompatybilnością pomiędzy przeglądarkami. Jeśli będziesz zainteresowany takim rozwiązaniem to na pewno znajdziesz masę materiałów w necie.

Ten post edytował sowiq 15.07.2009, 18:44:15

[batman]

To co podałeś w linku już przerabiałem i niestety nie nada się z jednej prostej przyczyny -

It is (and will alway be) strictly advised against using this library on a website!

. Potrzebuję stabilnego rozwiązania do zastosowań produkcyjnych (a nie do zabawy/nauki).
Na razie flasha nie biorę pod uwagę, ponieważ ostatni raz jak go używał, to właścicielem była Macromedia
Jeśli nie uda nic się znaleźć w js + html, to będę musiał dłubać we flashu.

[blooregard]

Pogrzebałem trochę, ale jedyne, co znalazłem, to coś takiego, ale to Cię nie urządza raczej (bo działa tylko w IE i obraca jedynie o wielokrotność 90 stopni):

Yup IE has filter which can be used to rotate, using the BasicImage filter. eg.

#div {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

BUT - that only supports 90, 180, and 270 degree rotations, so it will not place things at an angle.

Using images is the best way.

Tu masz źródło: http://www.codingforums.com/archive/index.php/t-77384.html

//EDIT
Jeszcze coś takiego namierzyłem:
http://simonjobling.com/blog/2006/css3-req...bject-rotation/

Ten post edytował blooregard 15.07.2009, 19:13:55

[batman]

~blooregard

rozwiązanie to musi działać na IE7+, Fx 3+ oraz Opera 9.6+.

[230005]

Nie wiem, czy ci to coś pomoże ale jestem pewny, że się da - kumpel kiedyś pisał coś w rodzaju portalu społecznościowego (miał jakieś zręby klas php + layout) i tam każde zdjęcie będące głównym było przekrzywione w lewo. Czego używał, tego nie pamiętam, ale uważam że się da (chyba że pamięć moja jest zawodna ;P). A nie możesz np. przekrzywić obrazka na serwerze?

[pgrzelka]

dużo tekstu masz w tym divie?
nie będzie najprościej użyć biblioteki GD w php, ewentualnie czegoś w tym stylu ...

[batman]

A nie możesz np. przekrzywić obrazka na serwerze?

Nie mogę, ponieważ nie tylko obrazki będą obracane. Tekst również musi posiadać taką możliwość.

dużo tekstu masz w tym divie? nie będzie najprościej użyć biblioteki GD w php, ewentualnie czegoś w tym stylu ...

Tekstu będzie od kilku do kilkunastu słów. GD będzie zaprzęgnięte do pracy jak tylko będę miał informację o ile mam obrócić dany element. Ale by mieć tą informację, muszę ten element jakoś obrócić...

[wookieb]

Zrobisz coś takiego tylko na canvasie. Działa pod ie7 (http://me.eae.net/projects/iecanvas/demo.html). Tam musisz zasymulować diva i bedziesz mógł go dowolnie obracać.
Aktualnie nie ma takiej możliwości na ie7 z poziomu css. Jeżeli chodzi o flasha to ściagnij sobie FlashDevelop i do tego flashSDK i masz możliwość programowania we flashu za free.

Ten post edytował wookieb 16.07.2009, 13:34:35

[batman]

~wookieb
Nie wiedziałem, że canvas działa w IE7. Jeśli w IE7 nie da się obracać diva, to użyję filtrów dla tej przeglądarki. Zawsze to jakieś rozwiązanie. Niestety w IE8 javascript wywala błąd, ale sądzę, że nie będzie z tym problemu.
Dzięki za info.

[mrbungle]

Niestety w IE8 javascript wywala błąd, ale sądzę, że nie będzie z tym problemu.

to obczaj tryby zgodności IE 8 z poprzednimi wersjami przeglądarek:

[HTML] pobierz, plaintext 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
[HTML] pobierz, plaintext 

co do tematu - zawsze szukam jakiegoś rozszerzenia do jQuery:

http://stackoverflow.com/questions/382591/...ement-in-jquery

ale problem jest bo pewno IE nie łaie transformacji ... nie mówiąc o innych elementach CSS3 :|

[sowiq]

co do tematu - zawsze szukam jakiegoś rozszerzenia do jQuery:

http://stackoverflow.com/questions/382591/...ement-in-jquery

Whoaaaa.. To jest za$%^&*te http://raphaeljs.com/image-rotation.html A najlepsze, że na FF, OP, CH i IE(6/7/8) działa tak samo