CSS skew() con jQuery rotate

bertolottipf

Full Member

Karma: +4/-4

Scollegato

Messaggi: 324

CSS skew() con jQuery rotate

« inserita:: Luglio 28, 2012, 02:25:57 pm »

Scusate... non sono riuscito a trovare risposta altrove, ma avrei bisogno di applicare un rotate() jQuery su un div a cui è stata applicata la proprietà skew() CSS.

Il problema sta che il rotate fa perdere al div la proprietà skew() che uso per creare un parallelogramma che vorrei utilizzare per un tangram.

Sapete aiutarmi???


	Registrato

Roberto Allegra

Global Moderator
Hero Member

Karma: +42/-1

Scollegato

Messaggi: 2006

Re: CSS skew() con jQuery rotate

« Risposta #1 inserita:: Luglio 29, 2012, 04:01:44 pm »

Le specifiche w3c stablisicono che un browser decente debba supportare trasformazioni multiple. Quindi: o scrivi male la trasformazione, o il browser non va bene. Per applicare più trasformazioni in sequenza (e l'ordine è significativo!) puoi scrivere qualcosa del genere.

Codice:

$tuoElemento.css('-webkit-transform', 'skewX(-45deg) rotate(90deg)')


	Registrato

I moderatori invitano tutti gli utenti a prendere visione del REGOLAMENTO e a rispettarlo.

bertolottipf

Full Member

Karma: +4/-4

Scollegato

Messaggi: 324

Re: CSS skew() con jQuery rotate

« Risposta #2 inserita:: Luglio 29, 2012, 10:40:32 pm »

ho provato, ma la trasformazione viene persa!

Codice:

$('#tngrm4').draggable();
$('#tngrm4').bind("click",function(){
tngrm4dgr = tngrm4dgr + 45;
$('#tngrm4').transition({skewY: '-45deg', rotate: tngrm4dgr});
//$('#tngrm4').css('-webkit-transform', 'skewX(-45deg) rotate('+tngrm4dgr+'deg)');
});

il css è

Codice:

.parallelogram {
width: 100px;
height: 200px;
-webkit-transform: skew(0deg, -45deg);
-moz-transform: skew(0deg, -45deg);
-o-transform: skew(0deg, -45deg);
-ms-transform: skew(0deg, -45deg);
background: #ccc;

position: relative;
top: -990px;
left: 300px;
}

non penso dipenda da questo, ma...


	Registrato

Roberto Allegra

Global Moderator
Hero Member

Karma: +42/-1

Scollegato

Messaggi: 2006

Re: CSS skew() con jQuery rotate

« Risposta #3 inserita:: Luglio 30, 2012, 02:16:55 pm »

Non ho molto tempo, ma ho riorganizzato il tuo codice in un jsfiddle (consiglio a tutti gli utenti di farlo, in questi casi). Guarda qui. Non funziona? Che browser usi?


	Registrato

I moderatori invitano tutti gli utenti a prendere visione del REGOLAMENTO e a rispettarlo.

bertolottipf

Full Member

Karma: +4/-4

Scollegato

Messaggi: 324

Re: CSS skew() con jQuery rotate

« Risposta #4 inserita:: Luglio 31, 2012, 03:46:59 pm »

TNX! Funzica!
Ultima cosa... esiste un modo per dire di ruotare finché si tiene il bottone (sinistro, nel mio caso) del mouse cliccato?
TNX ancora!


	Registrato

Roberto Allegra

Global Moderator
Hero Member

Karma: +42/-1

Scollegato

Messaggi: 2006

Re: CSS skew() con jQuery rotate

« Risposta #5 inserita:: Luglio 31, 2012, 08:43:54 pm »

Citazione

esiste un modo per dire di ruotare finché si tiene il bottone (sinistro, nel mio caso) del mouse cliccato

Certo che sì. Dovrai effettuare un bind degli eventi mousedown e mouseup, e sfruttare setTimeout per ruotare ogni n millisecondi il pezzo, finché l'utente non ha rilasciato il pulsante.


	Registrato

I moderatori invitano tutti gli utenti a prendere visione del REGOLAMENTO e a rispettarlo.

bertolottipf

Full Member

Karma: +4/-4

Scollegato

Messaggi: 324

Re: CSS skew() con jQuery rotate

« Risposta #6 inserita:: Agosto 01, 2012, 02:47:24 pm »

Grazie!!!!
Per il momento ho creato due versioni del gioco del tangram una facilitata, nel senso che cliccando l'oggetto si gira di 45° immediatamente, e una difficile, nella quale l'oggetto selezionato si ruota dei gradi che si vuole specificandoli in una input type="text".
Dimmi che te ne pare!
Puoi scaricarlo qui: http://www.bertolottipf.it/downloads/tangram2.0.zip.

Il prossimo passo sarebbe di poter cliccare e trascinare in alcuni div piazzati all'interno del pezzo per fare ruotare l'oggetto oppure fare uno slider che ruoti l'oggetto selezionato.... vedrò, sperando di riuscire col primo detto poiché reputo sia più d'effetto.

Ciao e ancora grazie.


	Registrato

Pagine: [1] Vai su

Stampa

« precedente successivo »

	Autore	Discussione: CSS skew() con jQuery rotate (Letto 770 volte)
0 utenti e 1 Utente non registrato stanno visualizzando questa discussione.