આળસુ લોકો માટે CSS ટ્રાન્સફોર્મ જનરેટર.
ઇચ્છિત દૃશ્ય મેળવવા માટે સ્કેલ સેટ કરો, ફેરવો, અનુવાદ કરો અને ત્રાંસુ કરો અને લાઇવ પૂર્વાવલોકન જુઓ.
સ્ક્યુ પ્રોપર્ટી માટે આત્યંતિક મૂલ્યો સેટ કરવાનું ટાળો કારણ કે પૂર્વાવલોકન સેટિંગ્સ પેનલને આવરી શકે છે. આ સ્થિતિમાં તમારે પેજ રિફ્રેશ કરવું પડશે.
સ્કેલ કરો, ફેરવો, અનુવાદ કરો અને ત્રાંસુ કરો
સ્કેલ કામ કરે છે જેમ તમે લક્ષિત ઘટકને ઝૂમ ઇન અને આઉટ કરશો. ડિફૉલ્ટ સ્કેલ મૂલ્ય 1 છે, જે મૂળ કદના ગુણક તરીકે કામ કરે છે. આનો અર્થ એ છે કે 0.5 અર્ધ જ્યારે 2 વિભાગને બમણું કરે છે.
ડિગ્રીમાં સેટ કરેલી બીજી મિલકત સાથે ઘટકને ઘડિયાળની દિશામાં ફેરવો. 180° સાથે વળવાથી ઑબ્જેક્ટ ઊલટું પડે છે જ્યારે 360° લે છે તે તેની મૂળ સીધી સ્થિતિમાં પાછું આવે છે. કોઈપણ હકારાત્મક અથવા નકારાત્મક મૂલ્ય અથવા દશાંશ પણ સેટ કરો.
અનુવાદ એ તત્વને તેની મૂળ સ્થિતિથી સંબંધિત પિક્સેલ સાથે શિફ્ટ કરે છે. X નું મૂલ્ય આડું છે જ્યારે Y ઊભી રીતે જ્યારે રોટેટ લક્ષણ શૂન્ય હોય છે.
ઑબ્જેક્ટ્સને તેમના આડા (X) અથવા વર્ટિકલ (Y) એક્સલ પર ત્રાંસા કરો.
CSS પરિવર્તન સમજાવ્યું
ટ્રાન્સફોર્મ CSS પ્રોપર્ટી તમને એલિમેન્ટને ફેરવવા, સ્કેલ કરવા, ત્રાંસા કરવા અને અનુવાદ કરવા દે છે. તે CSS વિઝ્યુઅલ ફોર્મેટિંગ મોડલની કોઓર્ડિનેટ સ્પેસમાં ફેરફાર કરે છે.
વ્યાખ્યા અને ઉપયોગ
ટ્રાન્સફોર્મ પ્રોપર્ટી એલિમેન્ટ પર 2D અથવા 3D ટ્રાન્સફોર્મેશન લાગુ કરે છે. આ ગુણધર્મ તમને તત્વોને ફેરવવા, માપવા, ખસેડવા, ત્રાંસા કરવા, વગેરેની મંજૂરી આપે છે.
બ્રાઉઝર સપોર્ટ
કોષ્ટકમાંના નંબરો પ્રથમ બ્રાઉઝર સંસ્કરણનો ઉલ્લેખ કરે છે જે મિલકતને સંપૂર્ણ રીતે સપોર્ટ કરે છે.
-webkit-, -moz-, અથવા -o- દ્વારા અનુસરવામાં આવેલ નંબરો ઉપસર્ગ સાથે કામ કરતા પ્રથમ સંસ્કરણનો ઉલ્લેખ કરે છે.
વાક્યરચના
transform: none|transform-functions|initial|inherit;
