CSS3 Transforms आपको Elements को Translate, Rotate, Scale, Skew करने की अनुमति देता है. Transformation एक Effect है जो एक Element को Shape, Size, Position को Change कर देता है.
translate()
rotate()
scale()
skewX()
matrix()
Translate() Method का उपयोग आप उसके Parameter के आधार पर किसी Object को Move करने के लिए करते है. आप इस Method मे दो प्रकार के Parameter को Pass कर सकते है जो की एक Left (x-axis) से है और दूसरा Top (y-axis) से होता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of translate() Method</title>
<style>
div {
float:left;
width:200px;
height:200px;
background-color: blue;
border:1px solid #A00000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_translate {
position:absolute;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:translate(40px,40px);
-ms-transform:translate(40px,40px);
-moz-transform:translate(40px,40px);
-webkit-transform:translate(40px,40px);
-o-transform:translate(40px,40px);
}
</style>
</head>
<body>
<div>
<p>tutorialsroot</p>
</div>
<div id="div_translate">to make a type specimen book.</div>
</body>
</html>
Rotate() Method का उपयोग उसकी Value के आधार पर किसी Object को Rotate करने के लिये किया जाता है. इस Method मे आप दो प्रकार की Values को Pass कर सकते है एक तो Positive Clockwise Rotation के लिए और दुसरी एक Negative Counter Clockwise Rotation के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of rotate() Method</title>
<style>
#div_norotate {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #1a22de;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotate {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(148, 255, 0, 0.5);
border:1px solid #1a22de;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="div_norotate">Tutorialsroot Original</div>
<div id="div_rotate">After Rotate Method Tutorialsroot</div>
</body>
</html>
Scale() Method का उपयोग उसकी Value के आधार पर Object Size को बढ़ाने या घटाने के लिए किया जाता है. इस Method से आप दो प्रकार की Values को Parameter मे पास कर सकते है जो कि एक तो width (x-axis) के लिए है और दुसरी height (y-axis) के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Scale() Method</title>
<style>
#div_noscale {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(0, 255, 111, 0.5));
border:1px solid #e21212;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_scale {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(0, 255, 111, 0.5);
border:1px solid #e21212;
transform:scale(2,2);
-ms-transform:scale(2,2);
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
}
</style>
</head>
<body>
<div id="div_noscale">Tutorialsroot Original</div>
<div id="div_scale">After Scale Method Tutorialsroot</div>
</body>
</html>
Skew() Method का उपयोग Parameter मे Pass Value के आधार पर किसी Object के Angle को बदलने के लिए किया जाता है. Parameter मे दो प्रकार की Value हो सकती है एक horizontal (x-axis) के लिए है और दुसरी vertical (y-axis) के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Skew() Method</title>
<style>
#div_noskew {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_skew {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:skew(15deg,20deg);
-ms-transform:skew(15deg,20deg);
-moz-transform:skew(15deg,20deg);
-webkit-transform:skew(15deg,20deg);
-o-transform:skew(15deg,20deg);
}
</style>
</head>
<body>
<div id="div_noskew">Tutorialsroot Original</div>
<div id="div_skew">After Scale Method Tutorialsroot</div>
</body>
</html>
Matrix() Method का उपयोग एक समय मे सभी Transformation को बदलने के लिए किया जाता है. ऐसे Parameter मे आप Six प्रकार की Value को Pass कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Example of Matrix() Method</title>
<style>
#div_nomatrix {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_matrix {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-ms-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-moz-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-webkit-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-o-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
}
</style>
</head>
<body>
<div id="div_nomatrix">Tutorialsroot Original</div>
<div id="div_matrix">After Scale Method Tutorialsroot</div>
</body>
</html>