Hisia ya transform-origin

Inaeleza na kusababisha

Masharti ya transform-origin inaonyesha uwezo wako wa kubadilisha kiwango cha elementi inayotumika.

Elementi za 2D transformation inaweza kubadilisha kiwango cha x na y ya elementi. Elementi za 3D transformation inaweza kubadilisha zarefu Z zao.

Kuwa na maana bora ya kufahamisha masharti ya transform-origin, tazama hiiMuonekano.

Watumiaji wa Safari/Chrome: Kuwa na maana bora ya kufahamisha masharti ya transform-origin kwa matukio ya 3D transformation, tazama hiiMuonekano.

Mawazo:Tazama: transform masharti yanaendelea.

Kuwa na maana bora ya kufahamisha masharti ya transform, tazama hiiMuonekano.

Tazama pia:

Mwongozo wa CSS3:Chukua ya 2D ya CSS3

Mwongozo wa CSS3:Chukua ya 3D ya CSS3

Mwongozo wa HTML DOM:Masharti ya transformOrigin

Mifano

Inaeleza kwa nini inaonekana kwenye kiwango cha kuzingatia kwa sababu ya chini cha kiwango cha kuzingatia.

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Tafuta mafanikio yako

Inafaa kuangalia mifano zaidi kwenye panga ya mawasiliano.

Inayowakilisha Kiingilizi:

transform-origin: x-axis y-axis z-axis;

Thamani ya masharti

Thamani Maelezo
x-axis

Inaeleza kwa nini inaonekana kwenye zarefu X na inaingia katika zarefu zingine. Inaingia kwa thamani:

  • kuchini
  • kati
  • kulia
  • madoa
  • %
y-axis

Inaeleza kwa nini inaonekana kwenye zarefu Y na inaingia katika zarefu zingine. Inaingia kwa thamani:

  • kimoja
  • kati
  • chini
  • madoa
  • %
z-axis

Inaeleza kwa nini inaonekana kwenye zarefu Z na inaingia katika zarefu zingine. Inaingia kwa thamani:

  • madoa

Mafano ya teknolojia

Wakati wa kuzingatia: 50% 50% 0
Kweli: no
Version: CSS3
Inayowakilisha Kiingilizi: object.style.transformOrigin="20% 40%"

Mafanikio ya kibarua

Mifano ya jumla kwenye tabia hizi inaonyesha version ya kwanza ya kufaa kwa sababu ya masharti.

Masharti ya -webkit-, -moz- au -ms- inanayotumiwa kwa sababu ya version ya kwanza ya prefix.

masharti Chrome IE Firefox Safari Opera
transform-origin
(kiwango kifupi)		 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
(kiwango tatu)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-