CSS3 Transform Property क्या है? इसका कैसे उपयोग करें

आपने किसी image को Photoshop या किसी भी image editor से transform यानि rotate, scale, skew आदि किया होगा,  लेकिन क्या आपको पता है की यह काम हम अपने web page के किसी HTML element के साथ भी कर सकते हैं|

आज हम CSS3 transform property के बारे में जानेंगे जिसका उपयोग कर किसी भी HTML element को अलग-अलग तरीके से transform कर सकते हैं जैसे re-size करना, किसी specific angle में rotate करना, scaling करना, shape change करना, एक जगह से दुसरे जगह translate करना आदि|

CSS3 Transform Property

Transform property का use करके किसी भी element के shape को transform किया जा सकता है| CSS3 में object के transformation के लिए कई सारे functions हैं जो की कुछ इस प्रकार हैं:

• rotate
• scale
• skew
• translate

Syntax
CSS Transform property का syntax बहुत ही simple है, इसकी value में ऊपर दिए गये transformation functions में से कोई एक या multiple functions specify किये जा सकते हैं|

इसकी value none भी हो सकती है जिसका मतलब कोई भी transformation नहीं होगा|

transform: none | transform-functions;

HTML Elements को CSS से Resize कैसे करें 

किसी भी element को resize करने के लिए transform property में scale function का use किया जाता है जिसमें scale value specify कर यह बताया जाता है की उस object को कितना scale किया जाये|

इसकी value यदि 1 है तो element size same होगा और उसमे कोई बदलाव नहीं होगा, 1 से कम होने पर size small होगी और 1 से अधिक होने पर scale large होगा|

CSS3 में Resizing के लिए उपयोग होने वाले functions कुछ इस प्रकार हैं:

scale( x, y) : दो values X और Y axis के लिए specify किये जायेंगे| Y की value provide नही करने पर वह X यानि पहली value के बराबर होगी| इससे element की width और height दोनों की value बता सकते हैं|

scaleX(n): सिर्फ X-axis यानि width को scale किया जायेगा और Y ( height ) में कोई बदलाव नहीं होगा|

scaleY(n): सिर्फ height को scale किया जायेगा, width में कोई scaling नही होगी|

scaleZ(n): Z-axis की scale value set की जा सकती है और बाकी में कोई changes नही होंगे |

scale3d(x, y, z): यह scale के समान ही है बस इसमे X और Y के साथ-साथ Z-axis की value भी specify की जा सकती है|

अब चलिए इन functions को कैसे use किया जाये इसको समझने के लिए कुछ examples देखते हैं:

इस उदाहरण में हम एक image लेंगे और उसे अलग-अलग functions के द्वारा scale करेंगे जिसका output आप नीचे देख सकते हैं|

.scalexy{transform: scale(0.5,0.7);}
.scalex{transform: scaleX(0.4);}
.scaley{transform: scaleY(0.8);}
.scalez{transform: scaleZ(5);}
.scalexyz{transform: scale3d(0.7,0.8,0.4);}

किसी element को rotate कैसे करें 

अगर हमें अपने web page पर किसी element को rotate करने की जरूरत पड़े तो यह काम CSS transform property में rotate function से कर सकते हैं|

Rotate function से हम object को 0 से 360 degrees rotate कर सकते हैं, यदि value positive हो तो clockwise, और  negative हो तो anti-clockwise direction में वह object rotate होगा|

इसको समझने के लिए एक example नीचे दिया गया है :

.rotatexy{transform: rotate(170deg);}
.rotatex{transform: rotateX(75deg);}
.rotatey{transform: rotateY(50deg);}

Elements को CSS से skew कैसे करें 

CSS transform property में skew function का use करके आप किसी HTML element को horizontal axis या vertical axis में distort कर सकते हैं और उस element का shape change कर सकते हैं|

Skew function का syntax scale जैसा ही simple है, skewX function का उपयोग कर object को horizontally distort कर सकते हैं उसी तरह vertical  distortion के लिए skewY का use किया जा सकता है| X और Y दोनों axes में skew करने के लिए simple skew(x,y) function का उपयोग किया जा सकता है|

अब चलिए इसको समझने के लिए कुछ उदाहरण देखते हैं:

.skewxy{transform: skew(185deg, 175deg);}
.skewx{transform: skewX(195deg);}
.skewy{transform: skewY(187deg);}

CSS से किसी element को translate कैसे करें

Translate function के जरिये हम किसी object को अपने स्थान से किसी specific distance पर x direction या y direction में move कर सकते हैं |

इसकी value pixel या percentage में specify कर सकते हैं, positive value से object right या down में shift होगा, वहीं negative value से left या top की ओर move होगा|

.translatexy{transform: translate(50px);}
.translatex{transform: translateX(10%);}
.translatey{transform: translateY(20%);}

Default Transform Origin को कैसे change करें 

अभी तक हम जितना भी transformations कर रहे थे वे सभी default transform origin जो की 50% horizontal और 50% vertical  यानि के object के center point के अनुसार हो रहे थे|

हम इस default origin point को अपनी सुविधा अनुसार बदल भी सकते हैं, जिसके लिए हमें transform-origin property का उपयोग करना होगा|

transform-origin property में एक या दो value specify किये जा सकते हैं, यदि एक value put किया जाए तो वह horizontal और vertical दोनों axes के लिए होगा, वहीं दो values specify किया गया हो तो पहली value horizontal और  दूसरी vertical axis के लिए होगी|

आपने इससे पहले background-position property का use किया होगा जिसमे position बताने के लिए pixel, percentage या keywords जैसे top left, top right, bottom left, bottom right, center का उपयोग होता था ठीक उसी तरह transform-origin property की value भी set की जाती है|

यदि हम value 0 0 set करते हैं तो उसका मतलब top left होगा उसी प्रकार 100% 100% का मतलब bottom right होगा इसके अलावा कुछ और भी specific values का उपयोग किया जा सकता है जैसे  30px 20px जिसका मतलब left से 30px और top से 20px होगा|

इसका कुछ उदाहरण आप नीचे देख सकते हैं:

.box1 {
  transform: skew(-10deg, -5deg);
  transform-origin: bottom left;
}
.box2 {
  transform: rotate(12deg);
  transform-origin:10px 30px;
}
.box3 {
 transform: scale(.8);
 transform-origin:50px 30px;
}

आज आपने इस article में CSS3 transform property के बारे में जाना और उसका उपयोग करना सीखा आप इसका उपयोग किसी भी HTML element के साथ कर सकते हैं|

जैसा की आपने ऊपर examples में देखा जिसमे हमने image और div elements पर इसका प्रयोग किया है, आप चाहें तो इस property का उपयोग किसी दुसरे object के साथ करके देख सकते हैं|

आपको यह article कैसा लगा हमें जरूर बताएं, यदि कोई सवाल पूछना हो तो इसके लिए आप नीचे comment box का उपयोग कर सकते हैं|