CSS transform प्रॉपर्टी का उपयोग करके किसी तत्व पर 2D या 3D ट्रांसफॉर्मेशन (रोटेशन, स्केलिंग, स्क्यूइंग, ट्रांसलेशन) लागू किया जा सकता है। यह तत्व के लेआउट को प्रभावित किए बिना विजुअल ट्रांसफॉर्मेशन करता है।
उदाहरण
नीचे दिए गए उदाहरण में, transform: rotate(10deg) का उपयोग करके <div> तत्व को 10 डिग्री घुमाया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: gray;
transform: rotate(10deg);
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div>Demo</div>
</body>
</html>
मुख्य 2D ट्रांसफॉर्म फंक्शन्स:
rotate(angle): घुमावscale(x, y): स्केलिंगtranslate(x, y): स्थानांतरणskew(x-angle, y-angle): तिरछा करनाmatrix(): सभी को एक साथ
3D फंक्शन्स: rotateX(), rotateY(), rotateZ(), translateZ(), perspective() आदि।