Esempio
Impostare il posizionamento di base di un elemento ruotato:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Prova tu stesso " Definizione e utilizzo
La proprietà transform origine consente di cambiare la posizione degli elementi trasformati.
trasformazioni 2D possono cambiare gli assi X e Y di un elemento. trasformazioni 3D possono anche modificare l'asse z di un elemento.
Per capire meglio la proprietà transform origine, visualizzare una demo .
Note: Questa proprietà deve essere usato insieme al trasformare la proprietà.
Tip: Per capire meglio questo bene in 3D trasforma, visualizzare una demo .
| Valore di default: | 50% 50% 0 |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.transformOrigin="0 0" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9,0 -MS- | 16,0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16,0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS Sintassi
transform-origin:x-axis y-axis z-axis|initial|inherit;I valori delle proprietà
| Costo dell'immobile | Descrizione |
|---|---|
| x-axis | Definisce dove la vista è posto l'asse x. Valori possibili:
|
| y-axis | Definisce dove la vista è posto l'asse y. Valori possibili:
|
| z-axis | Definisce dove la vista è posto all'asse z (for 3D transformations) . Valori possibili:
|
| iniziale | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| ereditare | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
Tutorial CSS: CSS 2D Transforms
Tutorial CSS: CSS 3D Transforms
Di riferimento HTML DOM: transformOrigin property