Sa artikulong ito mauunawaan natin ang Transform In sa detalye at sundin ito sa isang detalyadong praktikal na pagpapakita. Saklaw ang artikulong ito sa artikulong ito,
Sa pagsulong sa mga pag-andar ng website, pantay na mahalaga na magbigay ng matalino na pagsasama sa iyong website upang gawin itong mas nakakaakit at mas mahusay. Ang pagdaragdag ng iba't ibang mga elemento ng CSS na pumupuri sa iyong site ay ang kailangan ng oras.
Ang mga tao ay lumalayo sa mga website na hindi talaga umaakit sa masa. Kaya, paano ang tungkol sa pagsubok na baguhin ang ilan sa mga elemento at pagandahin ang iyong CSS sa isang mas mababang halaga ng compression.
Upang matupad ang mga katulad na pangangailangan, binago namin ang pag-aari ng CSS na nagbabago ng mga elemento sa alinman sa pag-skew, pag-ikot, pag-scale, o pag-translate ng mga ito.
Nagpapatuloy sa artikulong ito sa Transform In CSS
Ano ang Transform CSS?
Ang pagbabago ng isang elemento ng CSS ay nangangahulugang ibigay ito sa isang gilid sa alinman sa 2D o 3D form. Biswal nitong binabago ang istilo ng isang elemento.
Gumagawa ang pagbabago ng 2D sa mga axis ng X at Y. Maaari kang magbigay ng anumang gilid o istraktura sa parehong mga palakol upang gumawa ng mga pagbabago. Habang para sa pagbabago ng 3D, kailangan nitong gumana sa X, Y pati na rin ang mga axe ng Z upang maibigay ang lalim na kinakailangan.
Ang mga katangian ng CSS 2D ay nagbago:
| Pag-andar | Paglalarawan |
matrix ( n, n, n, n, n, n ) | Matrix ng anim na halaga |
Isalin( x, y ) | Pinapayagan ang elemento na gumalaw kasama ang X- at ang Y-axis |
translateX ( n ) | Pinapayagan ang elemento na gumalaw kasama ang X-axis |
translateY ( n ) | Pinapayagan ang elemento na gumalaw kasama ang Y-axis |
sukatan ( x, y ) | Binabago ang lapad at taas ng mga elemento |
scaleX ( n ) kung paano gamitin ang goto c ++ | Binabago ang lapad ng elemento |
scaleY ( n ) | Nagbabago ng taas ng mga elemento |
paikutin ( anggulo ) | Pinapayagan na paikutin ang elemento sa isang anggulo na tinukoy sa parameter |
igting ( x-anggulo, y-anggulo ) | Itinulak ang elemento kasama ang X- at ang Y-axis |
skewX ( anggulo ) | Skews ang elemento kasama ang X-axis |
madiyot ( anggulo ) | Itinaas ang elemento sa kahabaan ng Y-axis |
Ang mga katangian ng CSS 3D ay nagbago:
Pag-aari | Paglalarawan |
magbago | Nalalapat ang isang pagbabago ng 2D o 3D sa isang elemento |
pinagmulan ng pagbabago | Pinapayagan kang baguhin ang posisyon sa mga nabagong elemento |
transform-style | Tinutukoy kung paano nai-render ang mga pugad na elemento sa 3D space |
pananaw | Tinutukoy ang pananaw sa kung paano tiningnan ang mga elemento ng 3D |
pananaw-pinagmulan | Tinutukoy ang ilalim na posisyon ng mga elemento ng 3D |
backface-visibility | Tinutukoy kung ang isang elemento ay dapat na nakikita kapag hindi nakaharap sa screen |
Halimbawa:
css .element {lapad: 20px taas: 20px transform: scale (20)}Ngayon, kapag ginawa mo ito, ang tinukoy na elemento ay mai-scale ng 20 beses.
Hindi lamang ito, maaari mo ring sukatin ang axis na matalino para sa pahalang na pag-scale at patayong pag-scale.
ibahin ang anyo: scaleX (2) ibahin ang anyo: scaleY (.5)
Upang magbigay ng tamang pagbabago sa lahat ng mga browser na maaari mong:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Pinapabuti ng pag-aari ng CSS ang pag-uugnay ng espasyo ng antas ng pag-format ng visual na CSS.
Ano ang antas ng pag-format ng visual?
Ang antas ng pag-format ng visual ay nangangahulugang iproseso ang isang dokumento at biswal na ipakita ito sa mga platform ng media. Sa visual na pag-format, maaari mong ibahin ang bawat elemento bilang isang modelo na sumasang-ayon sa modelo ng kahon ng CSS. Tinutukoy ng modelo ng kahon ng CSS ang isang elemento sa isang karaniwang hugis-parihaba na format ng kahon na tumutukoy sa laki, posisyon, at mga pag-aari.
Tandaan: Ang mga nababagong elemento lamang ang maaaring mabago.
Nagpapatuloy sa artikulong ito sa Transform In CSS
Ano ang iba`t ibang mga katangian ng pagbabago?
Tingnan natin ang lahat ng mga nagbabagong katangian:
1. scale (): Ang ibig sabihin ng pag-scale ay upang baguhin ang laki ng elemento alinman sa pahalang o patayo.
Para sa patayong pag-scale:scaleX
Para sa pahalang na pag-scale:sukatanY
Para sa isang elemento, maaari mo ring baguhin ang laki ng font, padding, taas, o lapad. Ang default na halaga ay 1 na nangangahulugan din ng pagbibigay ng 0.5 habang hatiin ito ng halaga habang nagbibigay ng 2 doble ang pag-scale.
2. igting (): Pinapayagan ng Skew na pag-aari ang isang gumagamit na ikiling ang isang elemento sa kanan o kaliwa mula sa isang coordinate point. Ito ay halos tulad ng paggawa ng isang rektanggulo sa isang parallelogram. Maaari mong i-skew ang isang elemento sa pamamagitan ng mga coordinate nito.
Halimbawa:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Kapag ginawa mo ito, ang elemento ay lumilikha ng 25 degree nang pahalang at patayo sa pamamagitan ng paggamit ng skewX o skewY.
3. paikutin ( ) : Maaari mong paikutin ang isang elemento pakanan sa pag-uurong sa pamamagitan ng paggamit ng accommodation na ito. Maaari mong paikutin ito ng 180 degree o 360 degree upang maibalik ito sa orihinal na lugar.
.element {transform: rotate (25deg)}Para sa pagbibigay ng pag-ikot din, maaari mong gamitin ang anuman sa tatlong mga sukat: paikutinX, paikutinY, o paikutinZ.
4. isalin ( ) : Maaari mong ilipat ang isang elemento nang maayos baligtad o patagilid.
.element {transform: translate (20px, 10px)}Ililipat ng Translate ang isang bagay / elemento na tinukoy na baligtad o patagilid. Ang unang tinukoy na halaga ay gumagalaw sa tamang mga ward ng object (negatibong ililipat ito sa kaliwang bahagi) at ang pangalawang halaga ay ilipat ito pababa (ang pagtukoy ng isang negatibong halaga ay ilipat ito paitaas).
Kung maaaring malito ka nito, pagkatapos ay ilapat ang X axis upang baguhin ang posisyon ng elemento nang pahalang at Y axes upang baguhin ang posisyon nang patayo. Ang pinaka-kamangha-manghang aspeto tungkol sa pagbabago ng pag-aari ay ang, ang paglalapat ng pagbabago ay papayagan lamang ang elemento na ilipat, pinapanatili ang bawat iba pang elemento o teksto na buo. Ang distansya ay karaniwang kinukuha sa mga pixel o porsyento.
Halimbawa:
.element {transform: translateX (halaga) ibahin ang anyo: translateY (halaga)}5. pananaw (): Maaari kang magbigay ng isang malalim sa pananaw ng isang elemento. Pinapayagan nitong magbigay ng isang 3D na pagbabago sa isang elemento sa pamamagitan ng paggawa nito bilang cubical sa pagbabago.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Ang pagpapakilala ng z axis ay nagbibigay sa elemento ng isang visualization ng 3D. ilipat ng translateZ () ang elemento patungo sa manonood habang inilalayo ito ng isang negatibong halaga.
6. matrix () : Pagsamahin ang lahat ng mga pagbabago sa isa.
paikutin (45deg) isalin (24px, 25px)
Ang paglalapat ng matrix () ay pinagsasama ang lahat ng mga katangian ng pagbabago sa isang hanay.
Ang paglalapat ng mga pag-aari ng pagbabago ay maaaring mapahusay ang iyong elemento at samakatuwid ang iyong apela sa website. Subukan mo ba sila!
Dinadala tayo nito sa pagtatapos ng artikulong ito sa Transform In CSS.
Kung interesado kang matuto nang higit pa tungkol sa pag-unlad sa web, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).
Kung interesado ka pa rin Kung mayroon kang anumang katanungan, maaari mo itong mai-post sa seksyon ng komento ng blog na 'Ano ang CSS', at babalikan ka namin sa lalong madaling panahon.