CSS સ્ક્રોલ સ્નેપ પર્ફોર્મન્સ મોનિટરિંગ: સ્નેપ એનિમેશન એનાલિટિક્સ

CSS સ્ક્રોલ સ્નેપ માર્ગદર્શિત સ્ક્રોલિંગ અનુભવો બનાવવા માટે એક શક્તિશાળી મિકેનિઝમ પ્રદાન કરે છે, જે વપરાશકર્તાઓને કન્ટેન્ટ વિભાગોમાં સરળતાથી નેવિગેટ કરવા સક્ષમ બનાવે છે. જોકે, ખરાબ રીતે અમલમાં મૂકાયેલ સ્ક્રોલ સ્નેપ જંકી એનિમેશન અને નિરાશાજનક વપરાશકર્તા અનુભવ તરફ દોરી શકે છે. આ લેખ વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર સરળ અને રિસ્પોન્સિવ સ્ક્રોલિંગ સુનિશ્ચિત કરવા માટે, ખાસ કરીને સ્નેપ એનિમેશન પર ધ્યાન કેન્દ્રિત કરીને, CSS સ્ક્રોલ સ્નેપના પર્ફોર્મન્સનું અસરકારક રીતે નિરીક્ષણ અને વિશ્લેષણ કેવી રીતે કરવું તે શોધે છે.

CSS સ્ક્રોલ સ્નેપને સમજવું

પર્ફોર્મન્સ મોનિટરિંગમાં ડૂબકી મારતા પહેલાં, ચાલો CSS સ્ક્રોલ સ્નેપના મૂળભૂત સિદ્ધાંતોને ફરીથી જોઈએ. સ્ક્રોલ સ્નેપ તમને સ્ક્રોલ કન્ટેનરમાં પોઇન્ટ્સ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે કે જેના પર સ્ક્રોલિંગ ક્રિયા સમાપ્ત થાય ત્યારે સ્ક્રોલ પોઝિશન "સ્નેપ" થશે. આ એક અનુમાનિત અને નિયંત્રિત સ્ક્રોલિંગ અનુભવ બનાવે છે.

સ્ક્રોલ સ્નેપ માટેની મુખ્ય CSS પ્રોપર્ટીઝ:

• scroll-snap-type: સ્નેપ પોઇન્ટ્સ કેટલી કડક રીતે લાગુ કરવામાં આવે છે તે વ્યાખ્યાયિત કરે છે. સામાન્ય મૂલ્યોમાં none, x, y, both, mandatory, અને proximity શામેલ છે.
• scroll-snap-align: સ્પષ્ટ કરે છે કે સ્નેપ પોઇન્ટ સ્ક્રોલ કન્ટેનરમાં કેવી રીતે ગોઠવાય છે. મૂલ્યોમાં start, center, અને end શામેલ છે.
• scroll-padding: સ્ક્રોલ કન્ટેનરની આસપાસ પેડિંગ વ્યાખ્યાયિત કરે છે જે સ્નેપ વિસ્તારને અસર કરે છે. ફિક્સ્ડ હેડર્સ અથવા ફૂટર્સ માટે ઉપયોગી છે.
• scroll-margin: સ્નેપ વિસ્તારની આસપાસ માર્જિન સેટ કરે છે, જે અસર કરે છે કે કયું તત્વ સ્નેપ ટાર્ગેટ માનવામાં આવે છે.

ઉદાહરણ તરીકે, એક હોરિઝોન્ટલ ઇમેજ કેરોયુઝલનો વિચાર કરો:

            .carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex: none;
  width: 100%; /* Or a specific width */
  scroll-snap-align: start;
}

            

              
                Copy
              
            
          

આ કોડ સ્નિપેટ એક હોરિઝોન્ટલ કેરોયુઝલ બનાવે છે જ્યાં દરેક .carousel-item કન્ટેનરની શરૂઆતમાં સ્નેપ થાય છે, જે સુનિશ્ચિત કરે છે કે દરેક ઇમેજ સ્ક્રોલિંગ પછી સંપૂર્ણપણે દૃશ્યમાન છે.

સ્ક્રોલ સ્નેપ માટે પર્ફોર્મન્સ મોનિટરિંગનું મહત્વ

જ્યારે સ્ક્રોલ સ્નેપ વપરાશકર્તા નેવિગેશનને માર્ગદર્શન આપવા માટે એક અનુકૂળ રીત પ્રદાન કરે છે, ત્યારે તેના પર્ફોર્મન્સનું નિરીક્ષણ કરવું મહત્વપૂર્ણ છે. ખરાબ રીતે ઓપ્ટિમાઇઝ કરેલા સ્ક્રોલ સ્નેપ અમલીકરણો આમાં પરિણમી શકે છે:

• જંકી એનિમેશન્સ: અટકતું અને અસમાન સ્ક્રોલિંગ વપરાશકર્તાના અનુભવને બગાડે છે.
• ઉચ્ચ CPU વપરાશ: બિનકાર્યક્ષમ ગણતરીઓ બેટરી લાઇફને ઘટાડી શકે છે, ખાસ કરીને મોબાઇલ ઉપકરણો પર.
• લેઆઉટ થ્રેશિંગ: સ્ક્રોલિંગ દરમિયાન બ્રાઉઝરને વારંવાર લેઆઉટની પુનઃગણતરી કરવા માટે દબાણ કરવું પર્ફોર્મન્સને ગંભીર રીતે અસર કરે છે.
• ધીમું રેન્ડરિંગ: કન્ટેન્ટ રેન્ડર કરવામાં વિલંબને કારણે લેગનો અનુભવ થઈ શકે છે.
• સુલભતા સમસ્યાઓ: જંકી એનિમેશન્સ વેસ્ટિબ્યુલર ડિસઓર્ડરવાળા વપરાશકર્તાઓ માટે ખાસ કરીને સમસ્યારૂપ હોઈ શકે છે.

પર્ફોર્મન્સ મોનિટરિંગ આ સમસ્યાઓને વહેલી તકે ઓળખવામાં મદદ કરે છે, જે વિકાસકર્તાઓને સરળ અને વધુ આનંદપ્રદ વપરાશકર્તા અનુભવ માટે તેમના સ્ક્રોલ સ્નેપ અમલીકરણને ઓપ્ટિમાઇઝ કરવાની મંજૂરી આપે છે. વૈશ્વિક અસરને ધ્યાનમાં લો: ધીમા ઇન્ટરનેટ કનેક્શન અથવા જૂના ઉપકરણોવાળા વિસ્તારોમાં વપરાશકર્તાઓ પર્ફોર્મન્સની અવરોધો પ્રત્યે ખાસ કરીને સંવેદનશીલ હશે.

પર્ફોર્મન્સ મોનિટરિંગ માટેના સાધનો અને તકનીકો

CSS સ્ક્રોલ સ્નેપ પર્ફોર્મન્સના નિરીક્ષણ માટે ઘણા સાધનો અને તકનીકો ઉપલબ્ધ છે:

1. બ્રાઉઝર ડેવલપર ટૂલ્સ

આધુનિક બ્રાઉઝર ડેવલપર ટૂલ્સ પર્ફોર્મન્સ વિશ્લેષણ માટે અમૂલ્ય છે. મુખ્ય સાધનોમાં શામેલ છે:

• પર્ફોર્મન્સ પ્રોફાઇલર: બ્રાઉઝર પ્રવૃત્તિની ટાઇમલાઇન રેકોર્ડ કરે છે, જેમાં CPU વપરાશ, જાવાસ્ક્રિપ્ટ એક્ઝેક્યુશન, રેન્ડરિંગ અને પેઇન્ટિંગ દર્શાવવામાં આવે છે. સ્ક્રોલ સ્નેપ એનિમેશન દરમિયાન પર્ફોર્મન્સની અવરોધોને ઓળખવા માટે આનો ઉપયોગ કરો.
• રેન્ડરિંગ ટેબ: પૃષ્ઠના તે વિસ્તારોને હાઇલાઇટ કરે છે જે ફરીથી પેઇન્ટ કરવામાં આવી રહ્યા છે, જે અતિશય રિપેઇન્ટ્સ સંબંધિત સંભવિત પર્ફોર્મન્સ સમસ્યાઓને જાહેર કરે છે. રિપેઇન્ટ થયેલા વિસ્તારોને દૃષ્ટિની રીતે ઓળખવા માટે "Paint flashing" સક્ષમ કરો.
• લેયર્સ ટેબ: પૃષ્ઠના કમ્પોઝિટેડ લેયર્સ દર્શાવે છે. લેયર કમ્પોઝિશનને સમજવાથી ઓપ્ટિમાઇઝેશનની તકો ઓળખવામાં મદદ મળી શકે છે.
• ફ્રેમ રેટ (FPS) મીટર: પૃષ્ઠના ફ્રેમ્સ પ્રતિ સેકન્ડ (FPS) દર્શાવે છે. એક સરળ એનિમેશનને સતત 60 FPS જાળવી રાખવું જોઈએ.

આ સાધનોનો ઉપયોગ કરવા માટે, તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સ ખોલો (સામાન્ય રીતે F12 દબાવીને), યોગ્ય ટેબ પર નેવિગેટ કરો (દા.ત., Chrome માં "Performance", Firefox માં "Profiler"), રેકોર્ડિંગ શરૂ કરો, સ્ક્રોલ સ્નેપ સાથે સ્ક્રોલિંગ ક્રિયા કરો, અને પછી રેકોર્ડિંગ બંધ કરો. સુધારણા માટેના ક્ષેત્રોને ઓળખવા માટે પરિણામી ટાઇમલાઇનનું વિશ્લેષણ કરો.

ઉદાહરણ: Chrome પર્ફોર્મન્સ પ્રોફાઇલર

1. Chrome ડેવલપર ટૂલ્સ ખોલો (F12).
2. "Performance" ટેબ પર જાઓ.
3. પ્રોફાઇલિંગ શરૂ કરવા માટે રેકોર્ડ બટન (ગોળ) પર ક્લિક કરો.
4. તમારા પૃષ્ઠ પરના સ્ક્રોલ સ્નેપ તત્વો સાથે ક્રિયાપ્રતિક્રિયા કરો.
5. પ્રોફાઇલિંગ રોકવા માટે ફરીથી રેકોર્ડ બટન પર ક્લિક કરો.
6. ટાઇમલાઇનનું વિશ્લેષણ કરો. લાંબા સમય ચાલતા કાર્યો, અતિશય રિપેઇન્ટ્સ, અને લેઆઉટ થ્રેશિંગ માટે જુઓ.

2. WebPageTest

WebPageTest એક શક્તિશાળી ઓનલાઇન સાધન છે જે તમને વિશ્વભરના વિવિધ સ્થળો અને વિવિધ ઉપકરણો પરથી તમારી વેબસાઇટના પર્ફોર્મન્સનું પરીક્ષણ કરવાની મંજૂરી આપે છે. તે વિગતવાર મેટ્રિક્સ પ્રદાન કરે છે, જેમાં શામેલ છે:

• ફર્સ્ટ કન્ટેન્ટફુલ પેઇન્ટ (FCP): પ્રથમ કન્ટેન્ટ એલિમેન્ટ સ્ક્રીન પર દેખાય તે માટેનો સમય.
• લાર્જેસ્ટ કન્ટેન્ટફુલ પેઇન્ટ (LCP): સૌથી મોટો કન્ટેન્ટ એલિમેન્ટ દૃશ્યમાન બને તે માટેનો સમય.
• ક્યુમ્યુલેટિવ લેઆઉટ શિફ્ટ (CLS): પૃષ્ઠની દ્રશ્ય સ્થિરતા માપે છે. ઉચ્ચ CLS મૂલ્યો લેઆઉટ શિફ્ટ્સ સૂચવે છે જે વપરાશકર્તાના અનુભવ માટે વિક્ષેપકારક હોઈ શકે છે.
• ટોટલ બ્લોકિંગ ટાઇમ (TBT): મુખ્ય થ્રેડ બ્લોક થયેલ કુલ સમય માપે છે, જે વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાને અટકાવે છે.

WebPageTest તમને પર્ફોર્મન્સની અવરોધોને ઓળખવામાં મદદ કરી શકે છે જે સ્ક્રોલ સ્નેપ સંબંધિત સમસ્યાઓ સહિત, સમગ્ર વપરાશકર્તાના અનુભવને અસર કરી શકે છે.

3. Lighthouse

Lighthouse વેબ પૃષ્ઠોની ગુણવત્તા સુધારવા માટેનું એક સ્વયંચાલિત ઓપન-સોર્સ સાધન છે. તેને Chrome DevTools, કમાન્ડ લાઇન, અથવા નોડ મોડ્યુલ તરીકે ચલાવી શકાય છે. Lighthouse પર્ફોર્મન્સ, સુલભતા, પ્રગતિશીલ વેબ એપ્સ, SEO અને વધુ માટે પૃષ્ઠોનું ઓડિટ કરે છે. તે આ ક્ષેત્રોને કેવી રીતે સુધારવા તે અંગે કાર્યક્ષમ ભલામણો પ્રદાન કરે છે.

Lighthouse ઓડિટ્સ સ્ક્રોલ સ્નેપને ઓપ્ટિમાઇઝ કરવાની તકો જાહેર કરી શકે છે, જેમ કે ઇમેજનું કદ ઘટાડવું અથવા જાવાસ્ક્રિપ્ટ કોડને ઓપ્ટિમાઇઝ કરવું.

4. રિયલ યુઝર મોનિટરિંગ (RUM)

રિયલ યુઝર મોનિટરિંગ (RUM) માં વાસ્તવિક વપરાશકર્તાઓ જ્યારે તમારી વેબસાઇટ સાથે ક્રિયાપ્રતિક્રિયા કરે છે ત્યારે તેમના પર્ફોર્મન્સ ડેટા એકત્રિત કરવાનો સમાવેશ થાય છે. આ માત્ર સિન્થેટિક પરીક્ષણ પર આધાર રાખવાને બદલે, વાસ્તવિક વપરાશકર્તા અનુભવમાં મૂલ્યવાન આંતરદૃષ્ટિ પ્રદાન કરે છે.

RUM સાધનો મેટ્રિક્સને ટ્રેક કરી શકે છે જેમ કે:

• પેજ લોડ ટાઇમ: પૃષ્ઠને સંપૂર્ણ રીતે લોડ થવામાં લાગતો સમય.
• સ્ક્રોલ પર્ફોર્મન્સ: સ્ક્રોલિંગ પર્ફોર્મન્સ સંબંધિત મેટ્રિક્સ, જેમ કે ફ્રેમ રેટ અને જંક.
• એરર રેટ્સ: વપરાશકર્તાઓ દ્વારા સામનો કરવામાં આવેલી ભૂલોની સંખ્યા.

લોકપ્રિય RUM સાધનોમાં શામેલ છે:

• Google Analytics: કેટલાક મૂળભૂત પર્ફોર્મન્સ મેટ્રિક્સ પ્રદાન કરે છે.
• New Relic: એક વ્યાપક મોનિટરિંગ પ્લેટફોર્મ જે વિગતવાર પર્ફોર્મન્સ આંતરદૃષ્ટિ પ્રદાન કરે છે.
• Datadog: મજબૂત પર્ફોર્મન્સ ટ્રેકિંગ ક્ષમતાઓ સાથેનું બીજું લોકપ્રિય મોનિટરિંગ પ્લેટફોર્મ.
• Sentry: મુખ્યત્વે એક એરર ટ્રેકિંગ સાધન, પરંતુ પર્ફોર્મન્સ મોનિટરિંગ સુવિધાઓ પણ પ્રદાન કરે છે.

RUM ડેટા તમને પર્ફોર્મન્સ સમસ્યાઓને ઓળખવામાં મદદ કરી શકે છે જે વિકાસ અથવા પરીક્ષણ દરમિયાન સ્પષ્ટ ન હોય, તે સુનિશ્ચિત કરે છે કે તમારું સ્ક્રોલ સ્નેપ અમલીકરણ બધા વપરાશકર્તાઓ માટે, તેમના સ્થાન અથવા ઉપકરણને ધ્યાનમાં લીધા વિના, એક સુસંગત અને સકારાત્મક અનુભવ પ્રદાન કરે છે.

સ્નેપ એનિમેશન પર્ફોર્મન્સનું વિશ્લેષણ

સ્ક્રોલ સ્નેપ પર્ફોર્મન્સ મોનિટરિંગનું મૂળ સ્નેપ એનિમેશનનું જ વિશ્લેષણ કરવામાં રહેલું છે. અહીં શું જોવું તેની વિગતો છે:

1. ફ્રેમ રેટ (FPS)

એક સરળ એનિમેશનને સતત 60 FPS જાળવી રાખવું જોઈએ. આ થ્રેશોલ્ડથી નીચેના ઘટાડા સંભવિત પર્ફોર્મન્સ સમસ્યાઓ સૂચવે છે. સ્ક્રોલિંગ દરમિયાન ફ્રેમ રેટનું નિરીક્ષણ કરવા માટે બ્રાઉઝરના FPS મીટરનો ઉપયોગ કરો.

2. જંક (Jank)

જંક એનિમેશનમાં અટકવું અથવા અસમાનતાનો ઉલ્લેખ કરે છે. તે ઘણીવાર લાંબા સમય ચાલતા જાવાસ્ક્રિપ્ટ કાર્યો, લેઆઉટ થ્રેશિંગ અથવા અતિશય રિપેઇન્ટ્સને કારણે થાય છે. પર્ફોર્મન્સ પ્રોફાઇલર જંકના મૂળ કારણને ઓળખવામાં મદદ કરી શકે છે.

3. CPU વપરાશ

સ્ક્રોલ સ્નેપ એનિમેશન દરમિયાન ઉચ્ચ CPU વપરાશ બેટરી લાઇફને ઘટાડી શકે છે અને વપરાશકર્તાના અનુભવ પર નકારાત્મક અસર કરી શકે છે. પર્ફોર્મન્સ પ્રોફાઇલર વિવિધ પ્રક્રિયાઓ દ્વારા CPU વપરાશ દર્શાવે છે, જે તમને ઓળખવા દે છે કે કયા કાર્યો સૌથી વધુ સંસાધનોનો વપરાશ કરી રહ્યા છે.

4. લેઆઉટ થ્રેશિંગ

લેઆઉટ થ્રેશિંગ ત્યારે થાય છે જ્યારે બ્રાઉઝરને એનિમેશન દરમિયાન વારંવાર લેઆઉટની પુનઃગણતરી કરવા માટે દબાણ કરવામાં આવે છે. આ એક સામાન્ય પર્ફોર્મન્સ અવરોધ છે. લેઆઉટ પ્રોપર્ટીઝ (દા.ત., offsetWidth, offsetHeight) વાંચવાનું અને પછી તરત જ એ જ ફ્રેમમાં લેઆઉટ પ્રોપર્ટીઝમાં ફેરફાર કરવાનું ટાળો. પુનઃગણતરીઓને ઘટાડવા માટે લેઆઉટ ફેરફારોને બેચમાં કરો.

5. રિપેઇન્ટ્સ અને રિફ્લોઝ

રિપેઇન્ટ્સ ત્યારે થાય છે જ્યારે બ્રાઉઝર સ્ક્રીનનો એક ભાગ ફરીથી દોરે છે. રિફ્લોઝ (જેને લેઆઉટ પણ કહેવાય છે) ત્યારે થાય છે જ્યારે બ્રાઉઝર પૃષ્ઠના લેઆઉટની પુનઃગણતરી કરે છે. રિપેઇન્ટ્સ અને રિફ્લોઝ બંને ખર્ચાળ કામગીરી હોઈ શકે છે. CSS અને જાવાસ્ક્રિપ્ટ કોડને ઓપ્ટિમાઇઝ કરીને રિપેઇન્ટ્સ અને રિફ્લોઝને ઘટાડો.

સ્ક્રોલ સ્નેપ પર્ફોર્મન્સને ઓપ્ટિમાઇઝ કરવું

એકવાર તમે પર્ફોર્મન્સ સમસ્યાઓને ઓળખી લો, પછી તમે તમારા સ્ક્રોલ સ્નેપ અમલીકરણને ઓપ્ટિમાઇઝ કરવા માટે પગલાં લઈ શકો છો. અહીં કેટલીક વ્યૂહરચનાઓ છે:

1. હાર્ડવેર એક્સિલરેશનનો ઉપયોગ કરો

હાર્ડવેર એક્સિલરેશન એનિમેશન કરવા માટે GPU નો લાભ લે છે, જે સામાન્ય રીતે CPU નો ઉપયોગ કરતાં વધુ કાર્યક્ષમ હોય છે. તમે CSS પ્રોપર્ટીઝ જેમ કે transform અને opacity નો ઉપયોગ કરીને હાર્ડવેર એક્સિલરેશનને ટ્રિગર કરી શકો છો.

ઉદાહરણ:

            .scroll-snap-item {
  transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

            

              
                Copy
              
            
          

2. સ્ક્રોલ ઇવેન્ટ હેન્ડલર્સને ડિબાઉન્સ અથવા થ્રોટલ કરો

જો તમે સ્ક્રોલ ઇવેન્ટ્સને હેન્ડલ કરવા માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરી રહ્યાં છો, તો સ્ક્રોલ ઇવેન્ટ હેન્ડલરમાં સીધી રીતે ખર્ચાળ કામગીરી કરવાનું ટાળો. હેન્ડલરની એક્ઝેક્યુશનની આવર્તનને મર્યાદિત કરવા માટે ડિબાઉન્સિંગ અથવા થ્રોટલિંગનો ઉપયોગ કરો.

ઉદાહરણ (Lodash નો ઉપયોગ કરીને):

            import { debounce } from 'lodash';

window.addEventListener('scroll', debounce(() => {
  // Perform expensive operations here
}, 100)); // Execute the function at most once every 100ms

            

              
                Copy
              
            
          

3. ઇમેજ અને અન્ય એસેટ્સને ઓપ્ટિમાઇઝ કરો

મોટી ઇમેજ અને અન્ય એસેટ્સ પર્ફોર્મન્સ પર નોંધપાત્ર અસર કરી શકે છે. ઇમેજને કમ્પ્રેસ કરીને, યોગ્ય ફાઇલ ફોર્મેટ્સ (દા.ત., WebP) નો ઉપયોગ કરીને અને તેમને લેઝી-લોડિંગ કરીને ઓપ્ટિમાઇઝ કરો. ઉપરાંત, ભૌગોલિક રીતે વિતરિત સર્વર્સ પરથી એસેટ્સ સર્વ કરવા માટે કન્ટેન્ટ ડિલિવરી નેટવર્ક (CDN) નો ઉપયોગ કરવાનું વિચારો.

4. CSS ને સરળ બનાવો

જટિલ CSS નિયમો રેન્ડરિંગને ધીમું કરી શકે છે. બિનજરૂરી શૈલીઓ દૂર કરીને, વધુ કાર્યક્ષમ સિલેક્ટર્સનો ઉપયોગ કરીને, અને બોક્સ શેડોઝ, ગ્રેડિયન્ટ્સ અને અન્ય સંસાધન-સઘન અસરોના અતિશય ઉપયોગને ટાળીને તમારા CSS ને સરળ બનાવો.

5. DOM નું કદ ઘટાડો

એક મોટો DOM રેન્ડરિંગને ધીમું કરી શકે છે અને મેમરી વપરાશ વધારી શકે છે. બિનજરૂરી તત્વો દૂર કરીને, વર્ચ્યુઅલ સ્ક્રોલિંગ તકનીકોનો ઉપયોગ કરીને અને ઓફસ્ક્રીન કન્ટેન્ટના રેન્ડરિંગને મુલતવી રાખીને DOM નું કદ ઘટાડો.

6. `will-change` પ્રોપર્ટીનો વિવેકપૂર્ણ ઉપયોગ કરો

will-change પ્રોપર્ટી બ્રાઉઝરને સંકેત આપે છે કે કોઈ તત્વ બદલાવવાની શક્યતા છે. આ બ્રાઉઝરને અગાઉથી ફેરફાર માટે ઓપ્ટિમાઇઝ કરવાની મંજૂરી આપે છે. જોકે, will-change નો વધુ પડતો ઉપયોગ ખરેખર પર્ફોર્મન્સને ઘટાડી શકે છે. તેનો ઓછો અને માત્ર જ્યારે જરૂરી હોય ત્યારે જ ઉપયોગ કરો.

ઉદાહરણ:

            .scroll-snap-item {
  will-change: transform; /* Hint that the transform property will change */
}

            

              
                Copy