CSS3 Transform: Multiple Origins?

È possibile specificare un'origine in alto a sinistra (0%, 0%) per il ridimensionamento e un'origine diversa (al centro) per la rotazione in CSS3? Sto solo lavorando con il webkit, se questo aiuta.CSS3 Transform: Multiple Origins?

Attualmente sto usando un elenco di trasformare (cioè -webkit-transform: scala (newScale) Rotazione (newRotate)

ma sembra che non è possibile cambiare l'origine in-tra le passate c'è. un modo migliore per vedere questo? Attualmente, se scala un oggetto e lo ruota con un'origine al centro predefinito, la posizione dell'elemento è ora disattivata e quindi quando si trascina l'elemento, il cursore si trova ancora in alto a sinistra dell'elemento, mentre dovrebbe essere al centro Modifica dell'origine al centro per ridimensionarlo, ma presenta nuovi problemi con rotazione e ribaltamento

fonte

2012-01-20 David

trovato una buona soluzione al problema ... con la creazione di una relazione padre/figlio nel modo seguente:

<div class="container"> 
    <img src="" /> 
</div>

ora posso configurazione due classi come segue:

.container { 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: scale(0.5); 
} 

.container img { 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform: rotate(45deg); 
}

Questo farà esattamente quello che voglio: scala con un'origine in alto a sinistra, quindi ruota con l'origine al centro. Ecco!

fonte

2012-01-22 17:44:00 David

+1 per una soluzione -1 per il markup non necessario. Questo sembra un problema con la progettazione di queste regole da parte del webkit. – arkanciscan

Il tuo commento non aiuta nessuno arkanciscan. Risponde alla domanda nel modo in cui è attualmente implementata. Hai un altro suggerimento da dare? –

Questa era la mia unica speranza, ma non funziona ancora correttamente. – JacopKane

Che dire di ciò: http://jsfiddle.net/22Byh/1/

fonte

2012-01-20 20:12:49 dfsq

Questa è una buona idea, ma sembra eseguire solo l'ultima delle due trasformazioni. Se superi lo scalare fino a 2.0+ così puoi vederlo davvero, noterai che non sembra scalare. Se modifichi l'ordine in modo che la scala venga eseguita per secondo, non sembra ruotare. Mi sto perdendo qualcosa? – David

Considerare invece il ridimensionamento con origine (0,0) come ridimensionamento + traslazione con centro di origine. In isolamento quanto segue:

-webkit-transform-origin: top left; 
-webkit-transform: scale(1.5);

è uguale a:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);

In teoria centro origine rotazione dovrebbe lasciare angoli sporgenti da sqrt(1/2)-0.5 noi richiedendo per spostare l'origine basso ea destra da 20.71%, ma per qualche motivo l'algoritmo di trasformazione del webkit sposta le cose verso il basso per noi (ma non abbastanza) e ridimensiona l'origine per noi (di nuovo non del tutto). Così abbiamo bisogno di spostarsi a destra per 50% e apportare alcune modifiche per questo strano comportamento:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0); 
-webkit-transition: all 2s ease-in;

Nota: la mia risposta originale utilizzava un div con width:100px; e height100px; che richiede un translate3d(54px, 0, 0).

fonte

2012-01-20 22:08:59

Brett, ho familiarità con la traduzione per spostare l'origine, il ridimensionamento, quindi la traduzione, ma questa è una novità per me. Come si traduce alla fine del lavoro? 54px serve come esempio della larghezza/2 dell'asset? Mi spiace, cercando di risolvere il problema con questo ... – David

Nota come un ridimensionamento con origine (0,0) sposta il centro dell'oggetto mentre si ridimensiona? Quindi questo è lo stesso del ridimensionamento con origine (50%, 50%) durante la traduzione simultanea dell'oggetto. –

risposta

Problemi correlati