transform
Englisch [tr?ns?f?:m] US [tr?ns?f?:rm]
vt.Change; change
vi.Change
n.[Number]Transformation
origin
Englisch[ ??r?d??n] 美[??:r?d??n]
n Ursprung, Wurzel [Zahl], Ausgangspunkt;
CSS-Transform-Origin-Eigenschaft Syntax
Funktion: Mit dem Attribut transform-origin k?nnen Sie die Position des zu transformierenden Elements ?ndern. 2D-Transformationselemente ?ndern die x- und y-Achsen des Elements. 3D-Transformationselemente k?nnen auch ihre Z-Achse ?ndern. Schauen Sie sich diese Demo an, um die Eigenschaft ?transform-origin“ besser zu verstehen. Safari-/Chrome-Benutzer: Um besser zu verstehen, wie die Eigenschaft ?transform-origin“ für 3D-Transformationen verwendet wird, sehen Sie sich diese Demo an.
Syntax: transform-origin: x-axis y-axis z-axis
Beschreibung: x-axis Definiert, wo die Ansicht auf der X-Achse platziert wird. M?gliche Werte: links Mitte rechts L?nge % Y-Achse Definiert, wo auf der Y-Achse die Ansicht platziert wird. M?gliche Werte: oben Mitte unten L?nge % Z-Achse Definiert, wo auf der Z-Achse die Ansicht platziert wird. M?gliche Werte: L?nge
Hinweise: Dieses Attribut muss zusammen mit dem Transformationsattribut verwendet werden.
CSS-Transform-Origin-Eigenschaft Beispiel
Instanz
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin:20% 40%; /* Safari and Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>
Instanz ausführen ?
Klicken Sie auf die Schaltfl?che ?Instanz ausführen“, um die Online-Instanz anzuzeigen