css - Simulazione di trasform-origin usando translate




css3 css-transitions (2)

Voglio simulare le proprietà di transform-origin usando transform: translate in CSS.

Secondo MDN , questo è molto possibile:

Questa proprietà viene applicata traducendo prima l'elemento per il valore negato della proprietà, quindi applicando la trasformazione dell'elemento, quindi traducendo per il valore della proprietà.

Tuttavia, quando provo, ottengo risultati errati. Questi due rettangoli non sono chiaramente gli stessi:

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}
<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

Ho provato a cercare la risposta senza fortuna per un po 'di tempo ormai e nella mia mente dovrebbe essere relativamente semplice, non riesco proprio a capirlo.


Sei quasi bravo ma hai due errori. Devi invertire le traduzioni e cambiare l' transform-origin della transform-origin della seconda.

Se controlli la documentazione, vedrai che il riferimento utilizzato per tradurre l'origine è l'angolo in alto a sinistra dell'elemento e che il valore predefinito dell'origine della trasformazione è center . Quindi dobbiamo avere lo stesso riferimento per entrambi.

.origin {
  transform-origin: 50px 50px;
  transform:  rotate(45deg) scale(2);
}
.translate {
  transform-origin:0 0; 
  transform:translate(50px, 50px) rotate(45deg) scale(2) translate(-50px, -50px);
} 
.box {
  background-color: red;
  width: 50px;
  height: 50px;
}
.container {
  display: inline-block;
  margin: 30px;
  width: 150px;
  height: 150px;
  background-color: rgba(0,0,0,0.1);
}
<div class="container">
  <div class="box origin">
  </div>
</div>
<div class="container">
  <div class="box translate">
  </div>
</div>

Ecco dalle specification :

La matrice di trasformazione viene calcolata dalle proprietà di trasformazione e trasformazione-origine come segue:

  1. Inizia con la matrice identità.

  2. Traduci dalla X e Y calcolata di origine-trasformazione

  3. Moltiplicare per ciascuna delle funzioni di trasformazione nella proprietà di trasformazione da sinistra a destra

  4. Traduce dai valori X e Y calcolati negati di origine-trasformazione

Devi prestare attenzione alla formulazione! Potresti scoprire che l'MDN è in contraddizione con la specifica, MA non è così semplicemente perché c'è una differenza tra la traduzione dell'elemento (come descritto nella MDN) e la traduzione dell'origine dell'elemento o della coordinata locale (come descritto nella specifica ).

Ad esempio, tradurre l'elemento di -50px equivale a tradurre le sue coordinate locali (origine) di + 50px.

Devi anche prestare attenzione alla "moltiplicazione da sinistra a destra" in quanto può creare confusione. Se ci riferiamo alla stessa specifica nell'esempio 3 abbiamo:

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

Questa trasformazione traduce il sistema di coordinate locale di 80 pixel in entrambe le direzioni X e Y, quindi applica una scala del 150%, quindi una rotazione di 45 ° in senso orario attorno all'asse Z. L'impatto sul rendering dell'elemento può essere interpretato come un'applicazione di queste trasformazioni in ordine inverso : gli elementi vengono ruotati, quindi ridimensionati, quindi tradotti.

Quindi moltiplicare da sinistra a destra non significa applicare da sinistra a destra, il che in qualche modo spiega la necessità di invertire la traduzione applicata per simulare la transform-origin :


transform-origin non può essere così facile da simulare usando transform: translate . Usando transform-origin si modifica il centro delle trasformazioni, quindi le rotazioni e tutte le altre trasformazioni vengono calcolate in base a punti diversi.

Dai un'occhiata all'esempio seguente di MDN con transform-origin: 50px,50px . L'elemento ruotato si trova sotto il bordo inferiore del quadrato punteggiato per valore che non può essere calcolato facilmente. Potresti, sicuramente, simulare transform-origin con transform: translate per valori dovrebbe essere calcolata per una particolare combinazione di valori.







css-transforms