Mifano

Kuweka mtazamo

Mfano huu unaonyesha mchemraba wenye mtazamo uliowekwa katika nafasi tofauti. Jinsi mchemraba unavyopungua haraka hufafanuliwa na mali ya mtazamo. Kadiri thamani yake inavyokuwa ndogo, ndivyo mtazamo wa kina unavyokuwa.

Matokeo

HTML

HTML hapa chini huunda nakala nne za kisanduku kimoja, na mtazamo umewekwa katika maadili tofauti.

CSS

CSS huanzisha madarasa ambayo yanaweza kutumika kuweka mtazamo kwa umbali tofauti. Pia inajumuisha madarasa kwa sanduku la chombo na mchemraba yenyewe, pamoja na kila moja ya nyuso zake.

/* Madarasa ya mkato wa maadili tofauti ya mtazamo */ .pers250 ( mtazamo: 250px; ) .pers350 ( mtazamo: 350px; ) .pers500 ( mtazamo: 500px; ) .pers650 ( mtazamo: 650px; ) /* Div Bainisha chombo , div ya mchemraba, na uso wa kawaida */ .container ( upana: 200px; urefu: 200px; ukingo: 75px 0 0 75px; mpaka: hakuna; ) .mchemraba ( upana: 100%; urefu: 100%; mwonekano wa nyuma : inayoonekana ; asili ya mtazamo: 150% 150%; mtindo wa kubadilisha: hifadhi-3d; ) .uso ( onyesho: kizuizi; nafasi: kabisa; upana: 100px; urefu: 100px; mpaka: hakuna; urefu wa mstari: 100px; fonti-familia: sans-serif; ukubwa wa fonti: 60px; rangi: nyeupe; panga maandishi: katikati; ) /* Bainisha kila uso kulingana na mwelekeo */ .mbele ( usuli: rgba(0, 0, 0, 0.3) ; badilisha : translateZ(50px); ) .nyuma ( usuli: rgba(0, 255, 0, 1); rangi: nyeusi; badilisha: zungushaY(180deg) translateZ(50px); ) .kulia ( usuli: rgba(196, 0, 0, 0.7); badilisha: zungushaY(90deg) translateZ(50px); ) .kushoto ( usuli: rgba(0, 0, 196, 0.7); badilisha: zungushaY(-90deg) translateZ(50px); ) .juu ( usuli: rgba(196, 196, 0, 0.7); badilisha: rotateX(90deg) translateZ(50px); ) .chini ( usuli: rgba(196, 0, 196, 0.7); badilisha: rotateX(- 90deg) translateZ(50px); ) /* Fanya jedwali liwe zuri zaidi */ th, p, td ( rangi ya usuli: #EEEEEE; pedi: 10px; font-family: sans-serif; panga maandishi: kushoto; )

Vipimo

Utangamano wa kivinjari

Jedwali la uoanifu kwenye ukurasa huu limetolewa kutoka kwa data iliyopangwa. Iwapo ungependa kuchangia data, tafadhali angalia https://github.com/mdn/browser-compat-data na ututumie ombi la kuvuta.

Sasisha data ya uoanifu kwenye GitHub

Huamua umbali kutoka kwa ndege ya skrini hadi mahali ambapo mistari huungana na kwa hivyo huamua jinsi athari ya mtazamo inavyotamkwa. Sehemu chaguo-msingi ya kutoweka iko katikati ya kipengele na inaweza kubadilishwa kwa kutumia kipengele cha asili ya mtazamo.

habari fupi

Uteuzi

Maadili

hakuna Inabainisha kutotumia mtazamo kwa kipengele.<размер>Umbali kutoka kwa ndege ya kufuatilia hadi mahali ambapo mistari hukutana. Thamani ya sifuri au hasi hughairi athari ya mtazamo. Thamani ya chini, mtazamo unaojulikana zaidi unaonekana na kinyume chake.

Sanduku la mchanga

Winnie the Pooh siku zote hakuwa akichukia kiburudisho kidogo, haswa saa kumi na moja asubuhi, kwa sababu wakati huo kifungua kinywa kilikuwa kimeisha kwa muda mrefu, na chakula cha mchana kilikuwa bado hakijaanza. Na, bila shaka, alifurahi sana kuona kwamba Sungura alikuwa akichukua vikombe na sahani.

Mtoto ( usuli: #e4efc7; pedi: 10px; badilisha: zungushaY(15deg); ) .mzazi ( mtazamo-asili: 0 50%; mtazamo: 500px ; )

Mfano

Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 1. Tafadhali kumbuka kuwa mtazamo hautumiki kwa vipengele moja kwa moja, lakini kwa mzazi wao. Ili kubadilisha mtazamo wa vipengele vya mtu binafsi, tumia mtazamo() kazi ya kubadilisha mali.

Mchele. 1. Ushawishi wa mtazamo juu ya kuonekana kwa picha

Mfano wa kitu

Kitu.mtazamo.wa.mtindo

Kumbuka

Chrome hadi toleo la 45, Safari hadi toleo la 9, Opera hadi toleo la 23, Android inaelewa sifa ya -webkit-perspective.

Firefox kabla ya toleo la 16 inaelewa -moz-perspective mali.

Vipimo

Kila vipimo hupitia hatua kadhaa za uidhinishaji.

• Pendekezo - Vipimo vimeidhinishwa na W3C na inapendekezwa kama kiwango.
• Pendekezo la Mgombea ( Pendekezo linalowezekana) - Kikundi kinachohusika na kiwango kinaridhika kuwa kinafikia malengo yake, lakini kinahitaji usaidizi kutoka kwa jumuiya ya maendeleo ili kutekeleza kiwango.
• Pendekezo lililopendekezwa Pendekezo Lililopendekezwa) - katika hatua hii hati inawasilishwa kwa Baraza la Ushauri la W3C kwa idhini ya mwisho.
• Rasimu Inayofanyakazi - Toleo lililokomaa zaidi la rasimu ambayo imejadiliwa na kurekebishwa kwa ukaguzi wa jumuiya.
• Rasimu ya mhariri ( Rasimu ya uhariri) - toleo la rasimu ya kiwango baada ya mabadiliko kufanywa na wahariri wa mradi.
• Rasimu ( Vipimo vya rasimu) - toleo la kwanza la rasimu ya kiwango.

Baada ya kuona mifano michache ya kuvutia ya mabadiliko ya 3D kwa kutumia CSS kwenye mtandao, nilipendezwa, niliamua kuelewa mada, kusoma makala kadhaa, na nilionekana kuelewa kitu. Lakini, kama unavyojua, nadharia bila mazoezi ni kama zombie - aliyekufa, ingawa anaweza kula ubongo.

Ili kujifunza nyenzo, unahitaji kufanya kitu cha kuvutia mwenyewe kwa kutumia kile unachosoma. Ni kipengee gani rahisi zaidi cha 3D kutengeneza? Labda mchemraba. Na kufanya matokeo ya kuvutia zaidi na mazuri, basi iwe ni kete na dots kwenye nyuso. Nenda.

Kwa wasio na subira na wale wanaomtazama Habr kwa picha za kuchekesha - matokeo ya mwisho. Inafanya kazi katika Chrome, matoleo mapya zaidi ya Firefox, Safari. Opera 12.01 - bado, lakini wewe mwenyewe unajua kila kitu kuhusu IE.

Nyenzo za ujenzi

"Edges" ni divs za mraba za banal, zimewekwa kabisa kwenye kizuizi cha mchemraba: tutaiacha "moja" katikati, itatumika kama upande wa mbele, na wengine wote wataunganishwa nayo, kama ilivyo. Kielelezo cha 1. Hebu tuwape rangi kwa rangi tofauti kwa furaha na uwazi, ongeza kivuli cha ndani - na hiyo inatosha.

Pointi kwenye nyuso pia ni vitalu na nafasi: kabisa, mpaka-radius: 50% na kivuli cha ndani ( sanduku-kivuli: inset...) kutoa udanganyifu wa kiasi.

Hatimaye, pointi mbili sio ndogo sana.

Kwa mchemraba yenyewe unahitaji kutaja

Mtindo wa kubadilisha: kuhifadhi-3d;
vinginevyo thamani chaguo-msingi itatumika - gorofa, ulimwengu wa tatu-dimensional utakuwa gorofa tena na uso mmoja tu wa mchemraba wetu utabaki, ambayo iko "inakabiliwa" na mtumiaji.

Pia tutaongeza mali kwenye mchemraba

Badilisha: mtazamo(900px);
ambayo itaamua ni kiasi gani kitapotoshwa kutokana na mtazamo. Kadiri thamani inavyokuwa juu, ndivyo hatua ya "muunganisho wa mstari" inavyokuwa mbali zaidi, ndivyo athari ya upotoshaji inavyoonekana kidogo. Thamani zilizo chini ya 200 husababisha matokeo yasiyofaa (k.m. takwimu 2), takriban 300 - kwa upotoshaji unaoonekana ( sura ya 3), tutajiwekea kikomo kwa 900 ya kawaida, ambayo inatoa athari ya wastani sana.

Utaratibu umekwisha, mambo ya kuvutia yanaanza.

Bend na gundi

Kwanza, weka kwa kila uso mhimili ambao utazunguka. Ukweli ni kwamba kwa chaguo-msingi vitalu vinazunguka katikati yao, lakini tunahitaji tabia tofauti kidogo - katika Mchoro 4 unaweza kuona kwamba uso-5 unapaswa kuzunguka sehemu ya AB, uso-2 karibu na BC, na kadhalika.

Wacha tuitumie mali hiyo

Asili ya mabadiliko: y x;
ambayo hubadilisha shoka za mzunguko kwa kitu. Kwa mfano, kwa uso-5 unahitaji kusonga mhimili wa X (usawa) hadi ukingo wa chini, ipasavyo thamani ya pili ya asili ya kubadilisha inapaswa kuwa 100% ( kubadilisha-asili: 0 100%;) Thamani ya Y katika kesi hii sio muhimu, kwa sababu Tutazungusha uso huu karibu na mhimili mlalo pekee. Kwa uso-2, kinyume chake ni kweli - thamani ya X sio muhimu, na Y lazima iwekwe kwa 0, i.e. thamani itafanya Asili ya ubadilishaji: 0 0.

Pili, na, kwa kifungu hiki, "muhimu zaidi", kuzungusha moja kwa moja vitu tunavyotumia

Badilisha: zungusha3d(x, y, z, deg);
Vigezo vitatu vya kwanza huamua ni shoka gani za kuratibu kitu kitazunguka, na mwisho - kwa digrii ngapi. X, Y na Z hazijabainishwa kama thamani kamili, lakini kama uwiano wa pembe. Kwa mfano, kanuni badilisha: zungusha3d(2, 1, 0, 90deg); itasababisha kitu kuzungusha digrii 90 kuzunguka mhimili wa X na digrii 45 (90 * 1/2) kuzunguka mhimili wa Y. Mshono utafanya vivyo hivyo badilisha: zungusha3d(90, 45, 0, 90deg).

Washa Kielelezo cha 5 Nilijaribu kuonyesha mzunguko wa vizuizi karibu na shoka: mstatili wa kijivu ni nafasi ya awali ya kizuizi, mhimili unaozunguka unaozunguka umeonyeshwa kwa nyekundu, mistatili nyekundu na kijani ni nafasi ya block wakati inazungushwa na. -60 na digrii 60, kwa mtiririko huo.

Wacha tuzungushe nyuso kutoka kwa pili hadi ya tano kwa digrii 90 kuzunguka shoka zinazolingana, baada ya hapo, kwa uwazi, tunazunguka mchemraba yenyewe, na kuongeza .mchemraba mali badilisha: zungusha3d(1,2,0, -150deg), na kusababisha kitu kama kile kilichoonyeshwa ndani Kielelezo cha 6.

Mchemraba ni karibu tayari, kilichobaki ni "kuifunga".

Funga kifuniko na utumie

Badilisha: translate3d(x, y, z);
ambayo hukuruhusu kusonga kizuizi kwenye shoka zozote tatu. Kwa upande wetu, songa kwenye mhimili wa Z kwa saizi 200 (maadili hasi "ondoa" kizuizi, maadili chanya "ilete karibu"). Wakati huo huo, wacha tuzungushe uso kwa digrii 180 kando ya mhimili wa X - ingawa, kwa maadili chaguo-msingi, "pointi" zitaonyeshwa pande zote mbili, itakuwa sahihi zaidi kuweka uso unaoangalia mtazamaji, na sio ndani mchemraba. Kama matokeo, mali ya kubadilisha "kifuniko" chetu itaonekana kama hii: badilisha: translate3d(0,0,-200px) zungusha3d(1,0,0,180deg).

Hatimaye, kwa msaada wa banal uwazi: 0.9, ongeza uwazi kidogo (katika Firefox, kwa sababu isiyojulikana kwangu, kuongeza tu mali hii inafanya kazi kwa nyuso za mtu binafsi, lakini sio kwa kizuizi kizima cha mchemraba mara moja) - kwa njia hii mchemraba wetu unakuwa kama glasi kidogo, unaonekana zaidi na unaonekana. , kuwa waaminifu, husababisha Mwandishi ana mashambulizi ya nostalgia ya joto kwa nyakati hizo wakati "kompyuta" ilikuwa mashine isiyoeleweka katika kazi ya baba, na kete sawa ilifanya kama jenereta ya nambari ya pseudo-random katika michezo mingi.

Wacha tutikisike, tuzunguke

Ongeza vifungo vinne mwanzoni mwa kizuizi cha chombo (kabla ya mchemraba):

Tena, kwa kutumia nafasi kabisa, tutaziweka kwa pande zote nne za chombo, baada ya hapo tutafanya mchemraba kuzunguka kwa kutumia kitu kama uchawi huu:
.a-top:hover ~ .cube ( badilisha: mtazamo(900px) rotate3d(180,-45,0,-135deg);)
Kiteuzi cha "~", tofauti na "+", kinatumika sio tu kwa jirani wa karibu, lakini pia kwa "mbali", mradi tu ziko kwenye kiwango sawa katika mti wa DOM, ambayo ndiyo tunayotumia. Unapoweka kipanya juu ya kitufe .a-juu wacha tuzungushe kizuizi karibu nayo .mchemraba jinsi tunavyotaka.

Wakati huo huo, wacha tubadilishe upotoshaji wa mtazamo kwa kutumia mtazamo(900px). Kama unakumbuka (kumbuka, sawa?), Tunaweka thamani sawa kwa mchemraba mwanzoni mwa kazi, lakini ikiwa hatutangaza mali hii tena baada ya mchemraba kurudi kwetu, na msitu (kwenye Ukuta wa desktop. ) iko mbele, basi na upotovu huu utageuka pamoja na mchemraba - sehemu iliyo karibu na mtazamaji itapunguzwa, na moja ya mbali itapanuliwa. Inaonekana haiwezekani, kwa hivyo tutagawa mtazamo tena kila wakati tunapogeuka.

Kweli, ili mchemraba wetu usiruke kutoka nafasi moja hadi nyingine, lakini huzunguka vizuri, wacha tuongeze mstari kwake.

Mpito: urahisi wa 1s;
Ilitafsiriwa kwa Kirusi - wacha tuambie mchemraba ubadilishe mali zote vizuri ( zote), ambayo itabadilika ndani ya sekunde moja ( 1s) na uifanye kwa utendakazi urahisi, i.e. mwanzoni mwa uhuishaji, uiharakishe vizuri, na mwisho, uizuie vizuri. Wapenda usawa badala yake urahisi inaweza kuonyesha mstari- katika kesi hii, mchemraba utasonga kwa uchungu na bila roho.

Walakini, Houston, tuna shida nyingine. Mzunguko unatokea katikati ya uso-1, na sio katikati ya mchemraba yenyewe - ambayo, kwa ujumla, ni ya kimantiki, kwa sababu ni sisi ambao tumeandikwa kwenye mchemraba wa block, na wengine wote "wameinama" au kuhamishwa. "zaidi". Walakini, hii inaweza kutatuliwa kwa urahisi: unahitaji tu "kusonga" kingo zote karibu na mwangalizi kwa kutumia sawa. translate3d(0,0,100px) hivyo kwamba katikati ya mzunguko sanjari na katikati ya mchemraba.

Mabadiliko ya 3D ya CSS3 unda athari za kweli za 3D kwenye kurasa za wavuti. Mageuzi ya 3D hufanya kazi sawa na mabadiliko ya 2D, kukiwa na tofauti kwamba vipengele vinaweza kusogea kwenye mhimili wa Z, ndani na nje ya skrini. Ili kuwezesha nafasi ya 3D, unahitaji kuweka kipengele cha mtazamo wa chombo kikuu.

Ingawa maadili kadhaa ya mali ya kubadilisha hukuruhusu kubadilisha kipengee katika mfumo wa kuratibu wa 3D, vitu vyenyewe sio vitu vya 3D. Zipo katika ndege ya pande mbili (uso wa gorofa) na hazina kina.

Mageuzi ya kipengele cha CSS3 3D

Usaidizi wa kivinjari

YAANI: 10.0
Firefox: 16.0, 10. -moz-
Chrome: 36.0, 12.0 -kiti cha wavuti-
Safari: 4.0 -kiti cha wavuti-
Opera: 23.0, 15.0 -kiti cha wavuti-
iOS Safari: 9, 7.1 -kiti cha wavuti-
Opera Mini: —
Kivinjari cha Android: 44, 4.1 -kiti cha wavuti-
Chrome kwa Android: 44

1. Kuweka mtazamo wa 3D

Katika mtiririko wa kawaida, vipengele hutolewa gorofa na katika ndege sawa na kizuizi kilicho nao. Vitendaji vya kubadilisha 2D vinaweza kubadilisha mwonekano wa kipengee, lakini kipengele bado kinaonekana kwenye ndege sawa na kizuizi kilicho nacho.

Mtazamo na sifa za asili ya mtazamo zinaweza kutumika kuongeza hisia ya kina kwenye tukio, na kufanya vipengele vya juu kwenye mhimili wa Z (karibu na mtazamaji) vionekane vikubwa, na vilivyo mbali zaidi vionekane vidogo. Kiwango ni sawia na d/(d - Z), ambapo d ni thamani ya mtazamo, ambayo ni umbali kutoka kwa ndege ya kuchora hadi nafasi inayotarajiwa ya jicho la mtazamaji.

Ikiwa mtazamo wa 3D umebainishwa kwa kutumia kipengele cha kukokotoa cha mtazamo(), nafasi ya 3D inawashwa kwa kipengele kimoja pekee. Kipengele cha mtazamo huwasha nafasi ya 3D ndani ya kipengele kilicho na vipengele vya mtoto vilivyobadilishwa na hutumiwa kwao. Mali hairithiwi.

Sintaksia

Ul ( mtazamo: 500px; ) li ( badilisha: rotateX(50deg); ) li:hover ( badilisha: mtazamo(900px) rotate3d(180,-45,0,-135deg);)
Mchele. 2. Mifano ya maadili tofauti ya mtazamo wa 3D

2. Kuweka sehemu ya mabadiliko ya kipengele cha 3D cha mtazamo

Mali huweka mahali pa asili ya mali ya mtazamo. Mtazamo-asili wa thamani: 50% 50%; . Inakuruhusu kubadilisha mwelekeo wa mabadiliko ya kipengee cha 3D cha mtoto. Mali lazima itumike kwa kushirikiana na mali ya mtazamo kwa kizuizi cha kontena na mali ya kubadilisha kitu cha mtoto. Sio kurithi.

Sintaksia

Ul ( mtazamo: 150px; mtazamo-asili: 10% 10%; ) li ( badilisha: rotateX(50deg);)
Mchele. 3. Mifano ya kubainisha hatua ya mabadiliko

3. Mtindo wa mabadiliko ya 3D wa kubadilisha mtindo

Sifa hii huamua jinsi vipengele vya watoto vilivyobadilishwa (vipengee vilivyo na seti ya mali ya kubadilisha) vinavyotolewa katika nafasi ya 3D. Weka kwa kizuizi cha chombo. Sio kurithi.

Sintaksia

Ul (mtindo wa kubadilisha: hifadhi-3d; ) li ( badilisha: zungushaY(60deg); )

4. Kuonekana kwa upande wa nyuma wa kipengele backface-mwonekano

Sifa huamua ikiwa upande wa nyuma wa kipengele kilichobadilishwa unaonekana kwa mtumiaji. Kipengele ambacho hakijageuzwa kina sehemu ya mbele inayomkabili mtumiaji. Sio kurithi.

Sintaksia

Div ( mwonekano wa nyuma: siri; )

5. Kazi za mabadiliko ya 3D hubadilika

Sifa hii inabainisha mwonekano wa mabadiliko ya 2D na 3D ya kipengele. Mabadiliko ya 3D yanaelezewa kwa kutumia vitendaji vya ugeuzaji vilivyoorodheshwa kwenye jedwali hapa chini. Sio kurithi.

Sintaksia

Div (badilisha: rotateX(150deg);)

Sifa ya kubadilisha CSS hukuruhusu kubadilisha kipengee kionekane katika nafasi ya 2D au 3D. Kwa kutumia ubadilishaji, vipengele vinaweza kusogezwa, kuzungushwa, na kuongezwa kwa vipimo viwili au vitatu.

Kwa usahihi, mali ya kubadilisha inabadilisha mfumo wa kuratibu wa kipengele, ambayo husababisha kipengele kubadilishwa katika nafasi. Inachukua kama thamani orodha ya vitendakazi vya ugeuzaji (iliyoonyeshwa hapa chini) au thamani none . Mfumo wa kuratibu wa kipengele hubadilishwa kuwa thamani ya mwisho, ambayo hupatikana kwa kuendesha kila kazi kwenye tumbo lake linalolingana, na kisha kuzidisha matrices haya.

Thamani yoyote ya kipengele cha kubadilisha isipokuwa hakuna inasababisha muktadha wa rafu na kizuizi kilicho na. Hii ina maana kwamba kipengele kinachobadilishwa hufanya kazi kama chombo cha vipengele vya watoto vilivyowekwa vyema.

Matrix ya mabadiliko pia inategemea thamani ya mali ya asili ya kubadilisha, ambayo hutumiwa kuonyesha asili ya mabadiliko.

Mfumo wa kuratibu

Kila kipengele katika CSS kina mfumo wa kuratibu ambao asili yake imewekwa kwenye kona ya juu kushoto ya kipengele.

Wakati wa kutumia mabadiliko ya CSS, asili ya mfumo wa kuratibu huhamishwa hadi katikati ya kipengele. Hii ni kwa sababu thamani ya mali asili ya kubadilisha ni 50%50. Mabadiliko yote yanatumika kwa kipengele kulingana na nafasi mpya ya mfumo wa kuratibu.

Mfumo wa kuratibu asili na mfumo wa kuratibu wakati wa kutumia kibadilishaji na thamani ya mali ya asili ya kubadilisha-msingi ikitumika

Kwa kutumia mali ya asili ya kubadilisha, unaweza kutaja ambapo asili ya kuratibu inapaswa kuhamishwa. Kulingana na athari ya mabadiliko, nafasi tofauti za kuanzia za mabadiliko hutumiwa.

Ikiwa unatumia mali ya kubadilisha kuzungusha au kupotosha kipengee, hali hiyo hiyo hufanyika kwa mfumo wa kuratibu, na mabadiliko yote yanayofuata yatatumika kulingana na mfumo mpya wa kuratibu. Kwa hivyo, mpangilio wa mabadiliko ni muhimu; mlolongo tofauti utasababisha mabadiliko tofauti. Hii inaleta maana kwa sababu mabadiliko hutafsiri katika matrices, na kuzidisha matrices mbili katika hisabati hutoa matokeo tofauti kulingana na mpangilio wa matrices hizo. Kwa mfano, x b haitoi matokeo sawa na b x a ( ikiwa hakuna hata mmoja wao aliye wa kipekee).

Ikiwa unahitaji kuhamisha kipengele kwa kutumia maandishi ya CSS kubadilisha hadi kwenye nafasi tofauti na kuzungusha katika nafasi mpya, lazima uifanye kwa utaratibu huu: songa na kisha uzungushe. Ikiwa unazunguka kipengele, mfumo wake wa kuratibu utazunguka, na kusonga kwa mwelekeo fulani hautatoa matokeo yanayotarajiwa.

Ukizungusha kipengele cha digrii 90 kuzunguka mhimili wake y, kwa mfano, mhimili wake wa x utaelekeza ndani kabisa ya skrini, katika mwelekeo tofauti na wewe. Kwa hivyo ikiwa utatumia hoja kwenye mhimili wa x, kipengee hakitasonga kulia, kitaondoka kwako. Kwa hiyo, wakati wa kubadilisha, ni muhimu kulipa kipaumbele kwa utaratibu ambao kazi za mali ya kubadilisha zinaelezwa. Chaguo la kukokotoa la kwanza litatumika kwanza, na chaguo la kukokotoa la mwisho litatumika mwisho.

Vidokezo

Mabadiliko yanayotumika kwa kipengele huathiri mwonekano wake wa kuona, lakini hayaathiri kipengele chochote cha CSS isipokuwa sifa ya kufurika. Nafasi ambayo kipengele kilichukua kabla ya mabadiliko kitachukuliwa baada ya mabadiliko, na mabadiliko yenyewe hayataathiri muundo wa vipengele vingine vinavyozunguka. Sifa ya CSStransform haiathiri mtiririko wa maudhui ambamo kipengele kilichobadilishwa kinawekwa. Wakati huo huo, eneo la padding linazingatiwa wakati wa uongofu.

Tabia hii ni sawa na kile kinachotokea wakati vipengele vinarekebishwa kwa kutumia nafasi ya jamaa. Kwa hivyo, ikiwa kipengele cha vipengee vya ziada kimewekwa kusogeza au kiotomatiki, pau za kusogeza zitaonyeshwa inavyohitajika ili kukuruhusu kuona maudhui yoyote ambayo yamesogea zaidi ya eneo linaloonekana baada ya kugeuzwa.

Ingawa maadili kadhaa ya mali ya kubadilisha hukuruhusu kubadilisha kipengee katika mfumo wa kuratibu wa 3D, vitu vyenyewe sio 3D. Zinapatikana katika ndege yenye pande mbili ( uso wa gorofa) na hazina kina.

Kipengele kinapobadilishwa, thamani isiyobadilika ya sifa ya kiambatisho cha usuli inachukuliwa kama thamani ya kusogeza. Thamani iliyokokotwa ya kiambatisho cha usuli haijabadilishwa.

Kando na asili ya kubadilisha, mageuzi yanaweza kutumia mtazamo na sifa za asili ya mtazamo ili kuweka kina cha tukio, na sifa ya mtindo wa kubadilisha ili kuhifadhi ufafanuzi wa nafasi ya 3D. Hii ni muhimu wakati wa kufanya nested Kubadilisha CSS. Mali hizi zote hutumiwa pamoja na kila mmoja kuunda Mabadiliko ya CSS katika vipimo viwili au vitatu.

Sintaksia rasmi

• Sintaksia:

kubadilisha: hakuna |<список преобразований>

• Thamani ya awali: hakuna
• Inatumika kwa: kipengele kinachoweza kubadilishwa
• Uhuishaji: ndio

Vidokezo

<список преобразований>ni orodha ya kazi za mabadiliko.

Maadili

Unaweza kutumia ubadilishaji kwa kipengele kwa kutumia moja ya maadili yafuatayo kwa mali ya kubadilisha:

• Kubadilisha CSS kwa mzunguko ()
• translateX()
• translateY()
• kipimo()
• scaleX()
• scaleY()
• zungusha ()
• skew()
• skewX
• skewY
• matrix()
• tafsiriZ
• translate3d()
• scaleZ()
• scale3d()
• mzungukoX()
• zungushaY()
• zungushaZ()
• zungusha3d()
• matrix3d()
• mtazamo()

Baadhi ya vipengele hivi hutumika kutumia mabadiliko ya 2D, vingine hutumika kutumia mabadiliko ya 3D.

Vipengele vya kubadilisha 2D:

tafsiri ()

kubadilisha: kutafsiri(tx [, ty ]?); /* Alama ya swali inaonyesha thamani ya pili, ambayo ni ya hiari * /

Kitendakazi cha utafsiri cha CSS kinatumika kusogeza kipengele kando ya vekta, ambapo tx ni x-offset na ty ni y-offset. Ikiwa ty haijabainishwa, basi thamani yake inachukuliwa kuwa sifuri na kipengele kinahamishwa tu kwenye mhimili wa x. Ikiwa hakuna vitengo vilivyoainishwa, nambari itachukuliwa kama " vitengo maalum«.

Thamani chanya ya urekebishaji husogeza kipengele kwenye mwelekeo wa mhimili, na thamani hasi ya kukabiliana husogeza kipengele kinyume na mhimili.

Mifano:

badilisha: tafsiri(100px); /* husogeza kipengele cha pikseli 100 kwenye mhimili wa x */ kubadilisha: translate(-100px); /* husogeza kipengele cha 100px kwenye mhimili wa x */ kubadilisha: translate(50px, 300px); /* husogeza kipengele cha pikseli 50 kulia na pikseli 300 chini */ kubadilisha: tafsiri (50%, 10%); /* husogeza kipengele 50% ya upana wake kwenda kushoto, na 10% ya urefu wake chini */ kubadilisha: kutafsiri(-100%); /* husogeza kipengele -100% hadi kushoto */ kubadilisha: translate(100px, 100px); /* matokeo yanaonyeshwa kwenye takwimu hapa chini */

Matokeo ya kutumia kukabiliana na kipengele:

Matokeo ya kutumia tafsiri(100px, 100px) kwa kipengele. Kumbuka nafasi iliyobadilishwa ya asili.

translateX()

badilisha: translateX(tx);

Kitendakazi cha kubadilisha translateX() cha CSS kinatumika kusogeza kipengee umbali fulani kwenye mhimili wa x. Thamani ya tx imebainishwa katika vitengo vya urefu au asilimia. Ikiwa hakuna vitengo vilivyoainishwa, nambari itachukuliwa kama " vitengo maalum«.

Thamani chanya ya urekebishaji husogeza kipengee kwenye mwelekeo wa mhimili wa x, na thamani hasi ya urekebishaji hukihamisha kuelekea kinyume.

Mifano:

badilisha: translateX(300px); badilisha: translateX(-50%); badilisha: translateX(150%);

translateY()

badilisha: tafsiriY(ty);

Kitendakazi cha translateY() kinatumika kusogeza kipengele kwa umbali maalum kwenye mhimili wa Y. Thamani ya ty imebainishwa katika vitengo vya urefu au asilimia. Ikiwa vitengo hazijaainishwa, nambari itachukuliwa kama " vitengo maalum«.

Thamani chanya ya urekebishaji husogeza kipengee kwenye mwelekeo wa mhimili y, na thamani hasi ya urekebishaji hukipeleka kinyume.

Mifano:

badilisha: translateY(300px); badilisha: tafsiriY(-50%); badilisha: tafsiriY(150%);

kipimo()

kubadilisha: wadogo ( [, ]?); /* Alama ya swali inaonyesha thamani ya pili, ambayo ni ya hiari * /

Kitendaji cha ubadilishaji wa CSS kinatumika kwa kuongeza ( kunyoosha au kukandamiza) ya kipengele kwa kubadilisha ukubwa wake juu au chini. Inachukua kama thamani yake nambari moja au mbili bila vizio, sx na sy, ambapo sx hubadilisha ukubwa wa kipengele kwenye mhimili wa x, na sy hurekebisha ukubwa wa kipengele kwenye mhimili wa y. Ikiwa thamani moja tu imeainishwa ( sx), thamani ya pili ( sy) itachukuliwa kuwa sawa na ya kwanza.

Ikiwa thamani maalum ni kubwa kuliko moja, basi kipengele kinanyoosha - kitaonekana kikubwa katika mwelekeo unaofanana. Ikiwa thamani ni sawa na moja, basi kipengele kinabaki bila kubadilika ( katika mwelekeo unaofaa).

Ikiwa thamani ni kubwa kuliko 0 lakini chini ya 1, basi kipengele kinabanwa. Ikiwa thamani ni sifuri, basi kipengele kinatoweka. Thamani hasi zinakubalika, lakini hazibadilishi saizi ya kitu. Wanataja mzunguko wa kipengele kilichobadilishwa katika mwelekeo fulani.

Mifano:

kubadilisha: mizani(1, 1); /* kipengele bado hakijabadilika */ kubadilisha: mizani(2, 2); /* kipengele kinaonekana mara mbili zaidi ya vipimo vyake vya asili */ kubadilisha: mizani(1, 2); /* kipengele kimenyooshwa kwa wima hadi mara mbili ya urefu wake wa asili, vipimo vyake vya mlalo vinabaki bila kubadilika. Athari sawa hupatikana kwa kutumia kazi ya scaleY(2) (tazama hapa chini) */ kubadilisha: mizani(2, 1); /* kipengele kimenyooshwa kwa usawa hadi mara mbili ya upana wake wa asili, vipimo vyake vya wima vinabaki bila kubadilika. Athari sawa hupatikana kwa kutumia kazi ya scaleX(2) (tazama hapa chini) */ transform: scale(3); /* kipengele huongezeka kwa ukubwa kwa mara 3 */ kubadilisha: kiwango (0.5); /* kipengele hupungua hadi nusu ya ukubwa wake asili */ kubadilisha: mizani(0); /* kipengele kinatoweka */ kubadilisha: mizani(-1); /* huzungusha kipengele katika pande zote mbili */

Picha ifuatayo inaonyesha matokeo ya kutumia mabadiliko anuwai ya scale() kwa picha. Ya kwanza upande wa kushoto ni picha bila mabadiliko yoyote. Ya pili ni matokeo ya kutumia mabadiliko: mizani(2); , ya tatu ni matokeo ya kutumia transform: scale(0.5) , na ya nne ni matokeo ya kutumia transform: scale(0.5, 1.5); .

Angalia jinsi picha zinavyoingiliana, kwani kubadilisha kila moja hakuathiri mtiririko wa yaliyomo karibu nayo:

Matokeo ya kutumia mabadiliko anuwai ya scale() kwa picha. Ya kwanza upande wa kushoto ni picha bila mabadiliko yoyote. Ya pili ni matokeo ya kutumia kibadilishaji: mizani(2); ya tatu ni matokeo ya kutumia kibadilishaji: mizani(0.5), na ya nne ni matokeo ya kutumia kibadilishaji: mizani(0.5, 1.5);.

Picha ifuatayo ni matokeo ya kutumia kiwango cha kubadilisha CSS (na tofauti zake) na maadili hasi:

Picha inayoonyesha matokeo ya kutumia kitendakazi cha scale() chenye thamani hasi.

scaleX()

badilisha:scaleX( );

Kitendaji cha scaleX() kinatumika kupima, kunyoosha au kupunguza kipengele, na kukifanya kiwe kikubwa au kidogo, kando ya mhimili wa x. Inachukua kama thamani nambari sx, ambayo hutumiwa kurekebisha ukubwa wa kipengee kwenye mhimili wa x.

Ikiwa thamani iliyoainishwa ni kubwa kuliko 1, basi kipengee kimeinuliwa - kitaonekana pana kando ya mhimili wa x. Ikiwa thamani ni 1, basi kipengele kinabaki bila kubadilika. Ikiwa thamani ni kubwa kuliko 0 lakini chini ya 1, basi kipengele kinabanwa.

Ikiwa thamani ni 0, basi kipengele kinatoweka. Thamani hasi zinakubalika, lakini hazibadilishi saizi ya kitu. Wanataja mzunguko wa usawa wa kitu kilichobadilishwa ( kana kwamba inazunguka kuzunguka mhimili y).

Mifano:

badilisha: scaleX(2); /* hunyoosha kipengele hadi mara mbili ya ukubwa wake asili pamoja na mhimili wa x */ kubadilisha: scaleX(1); /* kipengele bado hakijabadilika */ kubadilisha: scaleX (0.25); /* hupunguza kipengele kando ya mhimili wa x hadi robo ya saizi yake asili */ kubadilisha: scaleX(-1); /* huzungusha kipengele kwenye mhimili wa x */

scaleY()

badilisha: scaleY( );

Kitendaji cha kubadilisha CSS scaleY() kinatumika kupima, kunyoosha, au kupunguza kipengele kwa vipimo vyake vya mhimili y. Inachukua kama thamani nambari sу, ambayo hutumika kubadilisha saizi ya kipengee kwenye mhimili y.

Ikiwa thamani iliyoainishwa ni kubwa kuliko 1, basi kipengee kimeinuliwa - kitaonekana juu kwenye mhimili wa y. Ikiwa thamani ni 1, basi kipengele kinabaki bila kubadilika. Ikiwa thamani ni kubwa kuliko 0 lakini chini ya 1, basi kipengele kinabanwa. Ikiwa thamani ni 0, basi kipengele kinatoweka.

Thamani hasi zinakubalika, lakini hazibadilishi saizi ya kitu. Kwa kweli, wanataja mzunguko wa wima wa kitu kilichobadilishwa ( kana kwamba inazunguka karibu na mhimili wa x).

Mifano:

kubadilisha: scaleY(2); /* hunyoosha kipengele hadi mara mbili ya ukubwa wake asili pamoja na mhimili y */ kubadilisha: scaleY(1); /* kipengele bado hakijabadilika */ kubadilisha: scaleY (0.25); /* hupunguza kipengele kwenye mhimili y hadi robo ya saizi yake asili */ kubadilisha: scaleY(-1); /* huzungusha kipengele kwenye mhimili y */

zungusha ()

badilisha: zungusha (<угол>);

Rotate() chaguo za kukokotoa hutumika kuzungusha kipengele katika nafasi ya 2D. Kipengele kinazungushwa na pembe ambayo hupitishwa kwa kazi. Kipengele kinazungushwa kuzunguka asili, kama inavyofafanuliwa na mali ya asili ya kubadilisha.

Thamani chanya hubainisha mzunguko wa saa wa kipengele. Thamani hasi ni kinyume cha saa.

Mifano:

kubadilisha: mzunguko (45deg); kubadilisha: mzunguko (-60deg); badilisha: zunguka (1.5rad); badilisha: zungusha (zamu 1);

Picha ifuatayo inaonyesha matokeo ya kutumia chanya na kisha thamani hasi kwa kitendakazi cha kuzungusha cha kubadilisha CSS kwenye picha. Angalia jinsi picha zinavyoingiliana, kwani kubadilisha kila moja hakuathiri mtiririko wa yaliyomo karibu nayo:

Thamani chanya ya kitendakazi cha rotate() huzungusha picha kisaa, huku thamani hasi ikiizungusha kinyume cha saa.

skew()

kubadilisha: skew (<угол> [, <угол>]?);

Kitendaji cha skew() kinatumika kupindisha kipengele. Kuinamisha kipengele kunaonekana kama kutumia athari ya bevel kwake. Kazi huchukua hoja moja au mbili: shoka na ay. Zote mbili ni maadili ya pembe. Thamani ya kwanza ( Oh) hupiga kipengee kwenye mhimili wa x, na hoja ya pili ( aw) - kando ya mhimili y.

Bevel kando ya mhimili wa x ni kama ikiwa tulivuta pembe zinazokinzana katika pande tofauti, na bevel kando ya mhimili wa y ni kama tukivuta pembe zinazokinzana kiwima katika pande tofauti (juu na chini). Thamani mbili huamua kiasi ambacho kipengele kinapigwa. Ikiwa thamani ya pili haijabainishwa, inachukuliwa kuwa 0.

Kipengele cha kubadilisha skew CSS kilikuwepo katika matoleo ya awali ya vipimo. Imeondolewa kutoka kwayo, lakini bado iko katika utekelezaji fulani. * Usitumie*. Ili kugeuza kipengee katika mwelekeo wowote, tumia vitendakazi vya skewX() na skewY() vilivyofafanuliwa hapa chini. Pia kumbuka kuwa tabia ya skew() kazi ni tofauti na mabadiliko ya kuzidisha skewX() na skewY() .

skewX()

badilisha: skewX(<угол>);

Chaguo za kukokotoa za skewX() hutumika kupindisha kipengele. Kuinamisha kipengele kunaonekana kama kutumia athari ya bevel kwake. Kwa upande wa skewX() , mchakato huo ni sawa na ikiwa tulinyakua wima mbili tofauti za mstatili na kuzivuta kwa mwelekeo tofauti kando ya mhimili wa x, na kugeuza mstatili kuwa paralelogramu.

Chaguo za kukokotoa huchukua shoka kama thamani yake. Kipengele kinapigwa na kiasi cha pembe. Unaweza kufikiria kuwa tunanyoosha wima mbili tofauti za mstatili kwa mwelekeo tofauti hadi thamani ya ndani ya pembe hizi kufikia digrii 90 ( Oh).

Ikiwa thamani ya pembe ni chanya, pembe za juu kushoto na chini za kulia za mstatili "zimenyoshwa". Ikiwa thamani ni hasi, pembe za juu kulia na chini kushoto. Ikiwa pembe ni digrii 90 (au digrii -90), kipengele kitatoweka. Thamani ya digrii 180 (au digrii -180) itaiacha bila kubadilika.

Mifano:

badilisha: skewX(30deg); kubadilisha: skewX (-30deg); kubadilisha: skewX (-0.5rad); kubadilisha: skewX(-1turn); kubadilisha: skewX (-90deg);

Picha hapa chini inaonyesha matokeo ya kutumia skewX() kwa picha iliyo na pembe chanya na kisha hasi ya kiasi sawa:

Matokeo ya kutumia skewX() kwa picha yenye pembe chanya na kisha hasi ya kiasi sawa.

Tilt ya kipengele pia inapotosha mfumo wa kuratibu. Wakati mfumo wa kuratibu unapopotoshwa, mabadiliko yanayofuatana yanaweza kutoa matokeo yasiyotarajiwa ikiwa hayatahesabiwa kulingana na mfumo mpya wa kuratibu. Unaweza kujifunza zaidi kuhusu mifumo ya kuratibu katika CSS na SVG hapa.

skewY()

kubadilisha: skewY ( );

Chaguo za kukokotoa za skewY() hutumika kupindisha kipengele. Kuinamisha kipengele kunaonekana kama kutumia athari ya bevel kwake. Kwa upande wa skewY() , mchakato huo ni sawa na ikiwa tulishika wima mbili tofauti za mstatili na kuzivuta kwa mwelekeo tofauti kando ya mhimili y, na kugeuza mstatili kuwa paralelogramu.

Kitendakazi cha kubadilisha CSS huchukua ay kama thamani yake. Kipengele kinapigwa na kiasi cha pembe. Unaweza kufikiria kwamba tunanyoosha wima mbili za kinyume cha mstatili kwa mwelekeo tofauti hadi thamani ya ndani ya pembe hizi kufikia digrii 90 - ay.

Ikiwa thamani ya pembe ni chanya, pembe za juu kushoto na chini za kulia za mstatili "zimenyoshwa". Ikiwa thamani ni hasi - juu kulia na chini kushoto. Ikiwa pembe ni digrii 90 (au digrii -90), kipengele kitatoweka. Thamani ya digrii 180 (au digrii -180) itaiacha bila kubadilika.

Mifano:

kubadilisha: skewY(30deg); kubadilisha: skewY (-30deg); kubadilisha: skewY (-0.5rad); kubadilisha: skewY (-1turn); kubadilisha: skewY (-90deg);

Picha ifuatayo inaonyesha matokeo ya kutumia skewY() kwa picha iliyo na pembe chanya na kisha hasi ya kiasi sawa:

Matokeo ya kutumia skewY() kwa picha iliyo na pembe chanya na kisha hasi ya kiasi sawa.

Ikumbukwe kwamba kugeuza kipengele pia kunapotosha mfumo wake wa kuratibu.

matrix()

kubadilisha: matrix ( [, ]{5,5})

Matrix() chaguo za kukokotoa hutumika kubainisha matriki ya mageuzi ya pande mbili. Inaweza kutumika kuchanganya mabadiliko mengi katika moja. Kwa mfano, badala ya kutumia vitendaji viwili (au zaidi) vya ubadilishaji (tazama hapo juu) katika tamko moja, kama hii:

badilisha: zungusha(45deg) tafsiri(24px,25px);

Unaweza kutumia kazi ya matrix ya CSStransform kuchanganya mabadiliko haya mawili kuwa matrix moja:

Kubadilisha: Matrix (0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.707108811865476, -0.70710678118626, 3448, 342, 342, 342, 342, 3448626, 342, 3448, 342, 342, 342, 3481868, 342, 3448,

Kuhesabu thamani za matrix3d() haitakuwa rahisi. Kwa bahati nzuri, Eric Meyer na Aaron Gustafson waliunda chombo muhimu sana, ni nani anayeweza kukufanyia mahesabu. Unachohitajika kufanya ni kuingiza maadili ya kubadilisha unayohitaji na ubofye kitufe chekundu ili zana ikutengenezee kitendakazi sawa cha matrix().

Vipengele vya Ubadilishaji wa 3D:

translateZ()

kubadilisha: translateZ(tz);

Kitendakazi cha translateZ() kinatumika kusogeza kipengele kwa umbali maalum kwenye mhimili wa z. Thamani ya tz imebainishwa katika vitengo vya urefu ( maslahi hayaruhusiwi hapa) Ikiwa vitengo hazijaainishwa, nambari itachukuliwa kama " vitengo maalum«.

Thamani chanya husogeza kipengele kwenye mwelekeo chanya wa mhimili z, na thamani hasi hukipeleka kinyume.

Mifano:

badilisha: translateZ(300px); kubadilisha: translateZ(-5em); badilisha: tafsiriZ(4vh);

translate3d()

kubadilisha: translate3d(tx , ty, tz);

Kitendakazi cha translate3d() ni sawa na 3D ya chaguo za kukokotoa za kutafsiri za CSS. Hutumika kusogeza kipengee kando ya vekta, ambapo tx ni uhamishaji kando ya mhimili wa x, ty ni uhamishaji kando ya mhimili wa y, na tz ni uhamishaji kando ya mhimili wa z. Thamani za tx na ty zimebainishwa katika vitengo vya urefu au asilimia. Thamani ya tz lazima ibainishwe katika vitengo vya urefu na haiwezi kubainishwa kama asilimia. Ikiwa vitengo hazijaainishwa, nambari itachukuliwa kama " vitengo maalum«.

Maadili chanya husogeza kipengee kwenye mwelekeo chanya wa shoka, na maadili hasi hukihamisha kuelekea upande mwingine.

Mifano:

badilisha: translate3d(100px, 100px, -200px); badilisha: translate3d(50%, -100%, 1em); badilisha: translate3d(-100px, -30px, 5vw);

scaleZ()

badilisha:scaleZ(<число>);

ScaleZ() chaguo za kukokotoa hutumika kuongeza kipengele katika mwelekeo wa tatu, kando ya mhimili wa z. Inachukua kama thamani yake nambari isiyo na nambari sz ambayo hutumiwa kurekebisha ukubwa wa kipengee katika mwelekeo unaofaa.

Mifano:

kubadilisha: scaleZ(2); kubadilisha: scaleZ(1); /* kipengele bado hakijabadilika */ kubadilisha: scaleZ(0.25); kubadilisha: scaleZ(-1);

Rasmi, scaleZ() hupima kipengele kwenye mhimili wa z. Lakini kwa kweli, inaonekana kama ilipunguzwa ( imebanwa/kunyooshwa) mhimili wa z wenyewe, na kisha kipengele kingesonga pamoja na mhimili baada ya kuongezwa.

Athari ya CSS transform scaleZ ni dhahiri zaidi unapokuwa na kipengele cha kuweka mtazamo ambacho kinazungushwa katika nafasi ya 3D au kusogezwa kwenye mhimili wa z.

Katika mfano wa kwanza, tuna vipengele viwili ambavyo viko katika nafasi ya 3D na vinahamishwa kando ya mhimili wa z kwa kutumia kazi ya translateZ(). Zote mbili husogea umbali sawa. Kisha tunapunguza kipengee cha pili (kilicho kulia) kwa kutumia scaleZ(2) . Picha ifuatayo inaonyesha matokeo ya utumiaji wa mabadiliko, na pia tofauti kati ya vitu viwili baada ya kuongeza ya pili kwa kutumia kazi ya scaleZ.

Ona kwamba kipengele cha pili kinaonekana kikubwa zaidi kwa sababu nafasi yake ya mhimili wa z imepunguzwa kwa vile mhimili wenyewe umepunguzwa. Inaonekana karibu na wewe na kwa hiyo kubwa. Lakini upana wake halisi na urefu haujabadilika:

Matokeo ya kutumia mabadiliko sawa kwa vipengele viwili, lakini kwa tofauti ambayo kazi ya scaleZ() ilitumiwa kuongeza kipengele cha pili.

Mfano mwingine ambao unaweza kuona wazi athari ya kutumia scaleZ . Vipengele viwili vinabadilishwa kwanza kwa njia ile ile, lakini badala ya kuwahamisha kwenye nafasi ya 3D, tunawazungusha kwenye mhimili wa x kwa kutumia kazi ya rotateX. Kipengele cha pili (upande wa kulia) kimepunguzwa kando ya mhimili wa z kwa kutumia scaleZ() kazi. Kumbuka kuwa inaonekana iko karibu na wewe na kwa hivyo kubwa zaidi:

Matokeo ya kutumia mabadiliko sawa kwa vipengele viwili, lakini kwa tofauti kwamba kipengele sahihi pia kimepunguzwa kwa kutumia scaleZ() kazi.

Lazima utumie ubadilishaji wa CSS kwa vitu hivi viwili kwa mpangilio sawa ili kuona athari ya scaleZ. Mpangilio wa mabadiliko ni muhimu, na maagizo tofauti ya mabadiliko yatatoa matokeo tofauti.

scale3d()

badilisha:scale3d(<число>, <число>, <число>);

Scale3d() chaguo za kukokotoa ni analogi ya 3D ya kitendakazi cha mizani(). Inatumika kukandamiza au kunyoosha kipengele, na kuifanya kuwa kubwa au ndogo. Chaguo za kukokotoa huchukua kama thamani nambari tatu bila vitengo: sx, sy, na sz. Ambapo: sx hupima kipengele kando ya mhimili wa x, sy huweka kipengele kwenye mhimili wa y, na sz hupima kipengele kwenye mhimili wa z.

Ikiwa thamani iliyotolewa ni kubwa kuliko 1, kipengele kitanyoosha katika mwelekeo unaofaa na kuonekana kubwa zaidi. Ikiwa thamani ni 1 basi inabaki bila kubadilika ( katika mwelekeo unaofaa) Ikiwa thamani ni kubwa kuliko 0 lakini chini ya 1, basi kipengele kinabanwa.

Ikiwa thamani ni 0, basi kipengele kinatoweka. Thamani hasi zinaruhusiwa, lakini haziongezei kipengele. Kwa kweli, maadili hasi ya sx na sy huzunguka kipengee kwenye mhimili unaolingana.

Mifano:

badilisha: scale3d(1, 1, 1); /* kipengele bado hakijabadilika */ kubadilisha: scale3d (2, 2, 2); /* kipengele kinaonekana mara mbili ya ukubwa wake wa asili */ kubadilisha: scale3d(1, 2, 0); badilisha: scale3d(2, 1, 3); kubadilisha: scale3d(-1, -1, -1);

zungusha3d()

badilisha: zungusha3d(<число>, <число>, <число>, <угол>);

Rotate3d() chaguo za kukokotoa ni sawa na 3D ya chaguo za kukokotoa za kuzungusha za CSS. Inatumika kuzungusha kipengele katika nafasi tatu-dimensional. Kipengele hicho kinazungushwa na pembe, ambayo hupitishwa kama parameta ya nne. Vigezo vitatu vya kwanza huamua mwelekeo wa mzunguko, na kwa pamoja huunda mwelekeo wa vector ambayo hutumiwa kuomba mzunguko katika mwelekeo fulani.

Thamani ya pembe chanya huzungusha kipengele kisaa kwenye mhimili unaolingana, na thamani hasi huzungusha kipengele kinyume cha saa kwenye mhimili huo.

Kielelezo kifuatacho kinaonyesha mwelekeo mzuri wa mzunguko ( mwendo wa saa) pamoja na shoka tatu:

Mwelekeo mzuri wa mzunguko katika shoka tatu. Kumbuka kwamba ukiangalia kutoka mwisho wa kila vekta kuelekea mwanzo, mzunguko wa saa ni kama inavyoonyeshwa kwenye picha.

Vigezo vitatu vya kwanza vya rotate3d () vinaonyesha mwelekeo wa vekta ambayo mzunguko utatokea, na pembe inaonyesha mwelekeo: saa ya saa kando ya vector au kinyume chake.

Mifano:

badilisha: zungusha3d(1, 1, 2, 45deg); badilisha: zungusha3d(2, 1, 3, 33deg); badilisha: zungusha3d(1, 0, 0, 45deg); /* kipengele kinazungushwa kisaa kuzunguka mhimili wa x kwa digrii 45 */ kubadilisha: zungusha3d(0, 1, 0, 45deg); /* kipengele kinazungushwa kisaa kuzunguka mhimili y kwa digrii 45 */ kubadilisha: zungusha3d(0, 0, 1, 45deg); /* kipengele kinazungushwa kisaa kuzunguka mhimili wa z kwa digrii 45 */ kubadilisha: zungusha3d(0, 0, 0, 50deg); /* HAKUNA MZUNGUKO ULIOTUMIKA */

Picha ifuatayo inaonyesha matokeo ya kutumia rotate3d(1, 1, 1, 50deg) kubadilisha hadi picha; :

Matokeo ya kutumia mageuzi kwa picha rotate3d(1, 1, 1, 50deg);

mzungukoX()

badilisha: rotateX(<угол>);

Kitendaji cha rotateX() kinatumika kuzungusha kipengele kuzunguka mhimili wa x katika nafasi ya 3D. Hii ni sawa na:

badilisha: zungusha3d(1, 0, 0,<угол>);

ambapo CSS kubadilisha rotate3d ni kitendakazi cha kubadilisha kinachotumika kuzungusha kipengele katika nafasi ya 3D.

Chaguo za kukokotoa huchukua pembe kama thamani yake. Kipengele kinazungushwa kwa kiasi kilichobainishwa kuzunguka mhimili wa x. Ikiwa thamani ni chanya, kipengele kinazungushwa kisaa; ikiwa thamani ni hasi, kipengele kinazungushwa kinyume cha saa. Mwelekeo wa saa umedhamiriwa kwa kuangalia mhimili wa x kutoka mwisho (ambapo mshale wa kiashiria cha mwelekeo kawaida huwekwa) hadi asili.

Mifano:

badilisha: rotateX(30deg); kubadilisha: rotateX(-135deg); badilisha: rotateX(90deg);

Picha ifuatayo inaonyesha matokeo ya kutumia rotateX(50deg) na rotateX(-50deg) kwa picha:

Matokeo ya kutumia rotateX(50deg) na rotateX(-50deg) kwenye picha.

zungushaY()

badilisha: zungushaY( );

Kitendaji cha rotateY() kinatumika kuzungusha kipengele kuzunguka mhimili wa y katika nafasi ya 3D. Hii ni sawa na:

badilisha: zungusha3d(0, 1, 0, );

Chaguo za kukokotoa huchukua pembe kama thamani. Kipengele kinazungushwa kwa kiasi kilichobainishwa kuzunguka mhimili wa y. Ikiwa thamani ni chanya, kipengele kinazungushwa saa, ikiwa hasi - kinyume cha saa

Mifano:

badilisha: zungushaY(30deg); badilisha: zungushaY(-135deg); badilisha: zungushaY(90deg);

Picha ifuatayo inaonyesha matokeo ya kutumia rotateY(50deg) na rotateY(-50deg) kwa picha:

Matokeo ya kutumia rotateY(50deg) na rotateY(-50deg) kwenye picha.

zungushaZ()

badilisha: mzungukoZ(<угол>); badilisha: mzungukoZ(<угол>);

Chaguo za kukokotoa za kubadilisha CSS rotateZ() hutumika kuzungusha kipengele kuzunguka mhimili wa z katika nafasi ya 3D. Hii ni sawa na:

badilisha: zungusha3d(0, 0, 1,<угол>);

ambapo rotate3d ni kitendakazi cha mageuzi kinachotumika kuzungusha kipengele katika nafasi ya 3D.

Kipengele kinazungushwa kwa kiasi kilichobainishwa kuzunguka mhimili wa z. Ikiwa thamani ni chanya, kipengele kinazungushwa kisaa; ikiwa ndivyo, kinazungushwa kinyume cha saa.

Mifano:

badilisha: zungushaZ(30deg); kubadilisha: zungushaZ(-135deg); badilisha: zungushaZ(90deg);

Picha ifuatayo inaonyesha matokeo ya kutumia rotateZ(50deg) na rotateZ(-50deg) kwa picha:

Matokeo ya kutumia rotateZ(50deg) na rotateZ(-50deg) kwa picha.

matrix3d()

badilisha: matrix3d(<число> [, <число> ]{15,15});

Chaguo za kukokotoa za matrix3d() ni sawa na 3D ya chaguo za kukokotoa za matrix(). matrix3d() hutumiwa kuchanganya mabadiliko katika tumbo moja na kuelezea mlolongo wa mabadiliko ya 3D kwenye mesh 4; 4 .

Kwa mfano, badala ya kutumia vitendaji viwili (au zaidi) vya ubadilishaji katika tamko moja kama hili:

badilisha: zungusha3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px);

Unaweza kuchanganya mabadiliko haya mawili kuwa matrix moja kwa kutumia CSS kubadilisha matrix3d() kazi:

badilisha: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.499999999999999, 0.70799, 0.707999999, 0.707999999. 9 9999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, 307207307307307,307,3067307307999999999. 08 88, 1)

mtazamo()

kubadilisha: mtazamo (<длина>)

Maelezo ya kiufundi:

Mtazamo() chaguo za kukokotoa hubainisha matriki ya makadirio ya mtazamo. Matrix hii hupima pointi katika X na Y kulingana na thamani zao za Z, kuongeza pointi kwa thamani chanya za Z mbali na asili, na pointi zenye thamani hasi za Z kuelekea asili.

Hatua kwenye ndege ya Z = 0 haibadilika. Thamani ya urefu iliyopitishwa kwa kazi huamua umbali kutoka kwa ndege ya Z = 0 hadi kwa mtazamaji. Maadili ya chini hutoa piramidi iliyopangwa zaidi na kwa hivyo athari inakuwa wazi zaidi kwa mtazamo. Kwa mfano, thamani ya urefu wa mtazamo wa saizi 1000 hutoa mabadiliko madogo, wakati thamani ya saizi 200 hutoa mabadiliko makubwa zaidi. Thamani ya kina lazima iwe kubwa kuliko 0, vinginevyo fomula ya kukokotoa si sahihi:

Mduara wa bluu kwenye picha unawakilisha kipengele katika nafasi ya 3D. Herufi d inawakilisha thamani ya mtazamo - makadirio ya umbali kati ya jicho la mtazamaji na skrini. Herufi Z inawakilisha nafasi ya kipengele kwenye mhimili. Kipengele zaidi kiko kwenye mhimili, ndogo inaonekana kuhusiana na mtazamaji, na karibu zaidi, inaonekana zaidi. Hii ni athari ya mtazamo katika nafasi tatu-dimensional.

Kwa maneno mengine…

Chaguo za kukokotoa za kubadilisha CSS () hutumika kuweka kina cha kipengele, na kufanya vipengee kuwa juu juu ya mhimili wa z (karibu na kitazamaji) kuonekana kuwa vikubwa na vipengee vilivyo mbali zaidi kuonekana vidogo. Kadiri thamani inavyopungua, ndivyo ndege z inavyokaribiana na mtazamaji na ndivyo athari inavyoonekana zaidi. Kadiri thamani inavyokuwa juu, ndivyo kipengee kiko mbali zaidi na skrini na mabadiliko madogo ya mtazamo yanazingatiwa.

Mtazamo() chaguo za kukokotoa hutumika kuamilisha nafasi ya 3D unapoweka mabadiliko ya 3D kwa kipengele kwa kutumia chaguo zozote za kukokotoa zilizoorodheshwa hapo juu. Kubainisha mtazamo ni muhimu, vinginevyo athari ya 3D itaonekana gorofa na 2D.

Mtazamo unaweza kutumika kwa kutumia perspective() kazi au kutumia kipengele cha mtazamo. Kuna tofauti kubwa kati ya njia hizi mbili. Nitatambua tu kuwa perspective() kazi inatumika kwa kipengele ambacho kinabadilishwa katika nafasi ya 3D, wakati mali ya mtazamo inatumika kwa kipengele ambacho watoto wake wanabadilishwa katika nafasi ya 3D.

Katika makala haya, tutazingatia kutumia perspective() tunapotumia mageuzi kwa kipengele katika nafasi ya 3D, bila mtazamo kuwekwa kwenye chombo chake.

Kwa mfano, ikiwa ungependa kuzungusha kipengele kuzunguka mhimili y kwa kutumia kitendakazi cha CSS transform rotateY(), unahitaji kubainisha mtazamo ili kuunda nafasi ya 3D kwa mabadiliko ya 3D. Vinginevyo mzunguko utaonekana gorofa na mbili-dimensional. Mchoro ufuatao unaonyesha tofauti kati ya picha iliyozungushwa katika nafasi ya 3D kwa mtazamo na picha inayozungushwa bila mtazamo:

Picha inaonyesha tofauti kati ya picha iliyozungushwa katika nafasi ya 3D kwa mtazamo na picha inayozungushwa bila mtazamo.

Mtazamo() chaguo za kukokotoa huchukua thamani ya urefu kama kigezo. Thamani yake ya chini, ndivyo ndege ya z iko karibu na mtazamaji, na athari inayoonekana zaidi. Thamani ya juu, kipengee kiko zaidi kutoka kwa skrini na athari haionekani sana. Picha ifuatayo inaonyesha matokeo ya kutumia mtazamo () maadili tofauti kwa kipengele:

Picha inaonyesha matokeo ya kutumia mtazamo () maadili tofauti kwa kipengele

Ikiwa una vipengele vingi ambavyo vinabadilishwa katika nafasi ya 3D na bado ni vya chombo kimoja, inashauriwa kutumia kipengele cha mtazamo kwenye kipengele cha mzazi badala ya kutumia perspective() chaguo la kukokotoa kwenye kila kipengele cha mtu binafsi. Vinginevyo, athari haitakuwa kama inavyotarajiwa, kwani perspective() kazi hupeana kila kipengee hatua yake ya kutoweka. Kwa kutumia mali ya mtazamo kwenye chombo, utahakikisha kwamba vipengele vyote ndani yake vina sehemu ya kawaida ya kutoweka.

Vidokezo

Kipengele kinaweza kuhamishwa kwa kutumia kipengele cha nafasi ya CSS na sifa zake zinazohusiana. Lakini ni bora kusogeza kipengee kwa kutumia kitendakazi cha utafsiri cha kubadilisha CSS kwa sababu huongeza kasi ya maunzi na hutoa utendakazi bora. Kitendakazi cha translate3d() pia wakati mwingine hutumiwa kutumia kuongeza kasi ya maunzi wakati wa kuhuisha vipengele katika vivinjari vya WebKit. Hii hukuruhusu kuunda uhuishaji laini.

Mifano

Katika mfano unaofuata, tunasonga na kuzunguka kipengele, na kisha kunyoosha. Mabadiliko ni ya 2D, kwa hivyo hakuna haja ya mtazamo:

div ( /* mitindo ya jumla... */ upana: 100px; urefu: 100px; rangi ya mandharinyuma: #0099CC; /* badilisha */ badilisha: tafsiri(80px, 80px) zungusha(45deg) mizani(1.5, 1.5); )

Matokeo ya kutumia mabadiliko hapo juu kwa kipengee

Mfano ufuatao ni wa mabadiliko ya 3D. Kipengele kitazungushwa kuzunguka mhimili wa y ili upande wake wa mbele ukabiliane na upande wa kulia wa skrini. Kipengele hicho pia husogezwa kando ya mhimili wa z, ambayo husababisha kusogea kuelekea upande wa kulia wa skrini. Hii hutokea kwa sababu baada ya kipengele kuzungushwa kuzunguka mhimili wa y, mhimili wa z hauelekei tena kuelekea mtazamaji. Kumbuka kuwa kuzungusha kipengele huzungusha mfumo wake wote wa kuratibu.

Mfano huu wa kubadilisha CSS unatumika mtazamo kwa kipengele kwa kutumia perspective() kazi:

Kipengele ( /* ... */ kubadilisha: mtazamo(800px) rotateY(90deg) translateZ(300px);)

Unaweza kufanya mabadiliko sawa, lakini badala ya kutumia mtazamo kwa kitu hicho, unaweza kuwezesha nafasi ya 3D kwenye chombo:

Mzazi ( /* ... */ mtazamo: 800px; ) .mtoto ( /* ... */ badilisha: rotateY(90deg) translateZ(300px); )

Onyesho la mwingiliano

Bofya kipengele kwenye onyesho hapa chini ili kuiona ikibadilika katika nafasi ya 3D. Athari ya kubadilisha inatumika baada ya kubofya kwa kutumia JavaScript. Kubofya kipengele zaidi ya mara moja hugeuza darasa la .transform, ambalo lina mageuzi. Mabadiliko ya CSS hutumiwa kufanya mpito kuwa laini.

Tazama onyesho

Usaidizi wa kivinjari

Ifuatayo ni jedwali la usaidizi la 2D Kubadilisha CSS:

Usaidizi wa mabadiliko ya 2D CSS3

Mbinu ya kubadilisha kipengele, ikiwa ni pamoja na kuzungusha, kuongeza ukubwa, n.k., inajumuisha usaidizi wa mali ya kubadilisha CSS pamoja na mali ya asili ya kubadilisha.

Hali ya sasa: Rasimu ya kazi ya W3C

* - kiambishi awali kinahitajika.

Ifuatayo ni jedwali la usaidizi wa kubadilisha CSS 3D:

Usaidizi wa kubadilisha CSS3 3D

Mbinu ya kubadilisha kipengele katika vipimo vitatu kwa kutumia kipengele cha kubadilisha CSS ni pamoja na usaidizi wa sifa ya mtazamo ili kuweka mtazamo wa z-space na sifa ya mwonekano wa nyuma ili kugeuza onyesho la upande wa nyuma wa kipengele kinachobadilishwa.

Hali ya sasa: Rasimu ya kazi ya W3C

Inatumika kutoka kwa matoleo yafuatayo: