Mfano wa transform wa CSS

Kieleza na matumizi

Kipimo cha transform kinachotumia kubadiliko 2D au 3D kwa elementi. Kipimo hiki kinoweza kufanya kubadilika kwa ukweli, kubadilika kwa ukubwa, kusambaa au kusikia kwa elementi.

Kuwa na maana kubadiliko kipimo cha transform, tazama hapa hikiMuonyesho.

Tazama pia:

Makala ya CSS3:Muungano wa 2D wa CSS3

Makala ya CSS3:Muungano wa 3D wa CSS3

Makala ya HTML DOM:Kipimo cha transform

Mifano

Kubadilika div elementi:

div
{
transform:rotate(7deg);
}

Jifunze tena

Kuna mifano mengi kwenye chini ya ukurasa.

Maktaba ya CSS

transform: none|transform-functions;

Thamani ya kipimo

Thamani Kueleza Test
none Kieleza kubadiliko hauonekani. Test
matrix(n,n,n,n,n,n) Kieleza 2D kubadiliko, kwa tumia matathika ya sita thamani. Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Kieleza 3D kubadiliko, kwa tumia 4x4 matathika ya 16 thamani.
translate(x,y) Kumieleza ujaribu wa 2D. Test
translate3d(x,y,z) Kumieleza ujaribu wa 3D.
translateX(x) Kumieleza ujaribu, bila kufikia ukwenye wa X. Test
translateY(y) Kumieleza ujaribu, bila kufikia ukwenye wa Y. Test
translateZ(z) Kumieleza ujaribu wa 3D, bila kufikia ukwenye wa Z.
scale(x,y) Kumieleza ujaribu wa 2D wa kusababisha kwa ukwenye wa pesa za ujaribu. Test
scale3d(x,y,z) Kumieleza ujaribu wa 3D wa kusababisha kwa ukwenye wa pesa za ujaribu.
scaleX(x) Kumieleza ujaribu wa kusababisha kwa ukwenye wa X. Test
scaleY(y) Kumieleza ujaribu wa kusababisha kwa ukwenye wa Y. Test
scaleZ(z) Kumieleza ujaribu wa 3D ya kusababisha kwa ukwenye wa Z.
rotate(angle) Kumieleza ujaribu wa 2D, inasababisha kwa ukwenye wa pesa za ujaribu. Test
rotate3d(x,y,z,angle) Kumieleza ujaribu wa 3D.
rotateX(angle) Kumieleza ujaribu wa 3D ya kusababisha kwa ukwenye wa X. Test
rotateY(angle) Kumieleza ujaribu wa 3D ya kusababisha kwa ukwenye wa Y. Test
rotateZ(angle) Kumieleza ujaribu wa 3D ya kusababisha kwa ukwenye wa Z. Test
skew(x-angle,y-angle) Kumieleza ujaribu wa 2D ya kusababisha kwa ukwenye wa X na Y. Test
skewX(angle) Kumieleza ujaribu wa 2D ya kusababisha kwa ukwenye wa X. Test
skewY(angle) Kumieleza ujaribu wa 2D ya kusababisha kwa ukwenye wa Y. Test
pesa za muonekano ya 3D kwa kina za ujaribu.n) Kumieleza pesa za muonekano ya 3D kwa kina za ujaribu. Test

Mafanikio ya teknolojia

Chaguo cha kuzingatia: none
Muhimu wa kumuweka kwa kina no
Tengeneza: CSS3
Inayotumiwa kwa lugha ya JavaScript: object.style.transform="rotate(7deg)"

Mifano yengine

Picha inayotumika kwenye mabonde wa mabonde
Mifano hii inonyesha jinsi ya kumichapisha picha ya Polaroid na kupunguza picha.

Muhimu wa kufaa kwa kina

Manunia namba kwenye tabia inaeleza kwa kawaida kwa sababu ya kufikia jukuu wa kwanza wa kufaa hicho kwa kina.

Manunia namba za kifaa cha -webkit-, -moz- au -ms- niweza kutumia sababu ya kufikia jukuu wa kwanza.

masharti Chrome IE / Edge Firefox Safari Opera
transform (2D) 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 (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-