एक Transforms CSS3 की ऐसी Property है जिसका उपयोग Element के वास्तविक स्वरूप को बदलने के लिए किया जाता है. CSS3 की इस सुविधा के साथ आप एक Element की Shape, Size position को बदल सकते है.
3D Transforms CSS3 Transform का ऐसा है Amazing Feature जिसका उपयोग निम्नलिखित Methods के लिए किया जाता है.
3D Transforms के उपयोग से आप Element को x-axis, y-axis and z-axis, कर सकते है.
RotateX() Method का उपयोग किसी Object को x-axis अक्षांश पर दी गई Degree पर घुमाने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of X-axis 3D transforms</title>
<style>
#div_norotate {
float:left;
width:200px;
height:200px;
background-color:rgba(107, 214, 158, 0.5);
border:1px solid #2917cc;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotatex {
position:absolute;
width:200px;
height:200px;
background-color:rgba(37, 117, 79, 0.5);
border:1px solid #2917cc;
transform:rotateX(140deg);
-webkit-transform:rotateX(140deg);
-moz-transform:rotateX(140deg);
}
</style>
</head>
<body>
<div id="div_norotate">tutorialsroot</div>
<div id="div_rotatex">After rotateX method tutorialsroot</div>
</body>
</html>
RotateY() Method का उपयोग Object को Desired Degree पर Y-axis के ऊपर घुमाने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Y-axis 3D transforms</title>
<style>
#div_norotate {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(107, 214, 158, 0.5);
border:2px solid #2917cc;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotateY {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(37, 117, 79, 0.5);
border:2px solid #2917cc;
transform:rotateY(140deg);
-webkit-transform:rotateY(140deg);
-moz-transform:rotateY(140deg);
}
</style>
</head>
<body>
<div id="div_norotate">Tutorialsroot</div>
<div id="div_rotateY">After rotateX method tutorialsroot</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example of Z-axis 3D transforms</title>
<style>
div {
width: 400px;
height: 200px;
background-color: #a7e2bc;
border: 1px solid pink;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
background-color: pink;
}
</style>
</head>
<body>
<div>tutorialsroot.com</div>
<div id="zDiv">
tutorialsroot.com
</div>
</body>
</html>