Exemplu
Setați plasarea unui element de bază a lui rotită:
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%;
}
Încearcă - l singur » Definiție și utilizare
Proprietatea de transformare origine vă permite să schimbați poziția elementelor transformate.
transformări 2D pot schimba x- și axa y a unui element. transformări 3D pot schimba, de asemenea, axa z a unui element.
Pentru a înțelege mai bine proprietatea transforma-origine, o demonstrație .
Note: Această proprietate trebuie să fie utilizat împreună cu transformarea proprietății.
Tip: Pentru a înțelege mai bine această proprietate pentru transformă 3D, o demonstrație .
| Valoare implicită: | 50% 50% 0 |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transformOrigin="0 0" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36,0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 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 4.0 -webkit- | 23.0 15,0 -webkit- |
CSS Sintaxa
transform-origin: Valori de proprietate Valoarea proprietății Descriere x-axis Definește unde vederea este plasat la axa x. Valori posibile: - stânga
- centru
- dreapta
- length
- %
y-axis Definește unde vederea este plasat la axa y. Valori posibile: - top
- centru
- fund
- length
- %
z-axis Definește unde vizualizarea este plasată la axa z (for 3D transformations) . Valori posibile: - length
iniţială Setează această proprietate la valoarea implicită. Citiți despre inițială moşteni Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Pagini similare
Tutorial CSS: CSS 2D Transformări
Tutorial CSS: CSS 3D Transformări
HTML DOM referință: transformOrigin property