CSS3 - 3d transform
CSS3 - 3d transform
The element can be moved to X-axis, Y-axis and Z-axis using 3d transform. Various methods for 3D transform are as below,
rotateX(angle in degree): it is defined to rotate transforms along with X axis.
rotateY(angle in degree): it is defined to rotate transforms along with Y axis.
rotateZ(angle in degree): it is defined to rotate transforms along with Z axis.
Marix (n1,n2,n3,n4,n5,n6,n7,n8,n9,n10,n11,n12,n13,n14,n15,n16): it is defined for matrix transformation of the element with sixteen values.
Example:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#test {
transform: rotateX(150deg);
}
div#test1 {
transform: rotateY(150deg);
}
div#test2 {
transform: rotateZ(90deg);
}
div#test3 {
transform: matrix3d(1, 0, 0.5, 1, 150, 0,1, 0, 0.5, 1, 150, 0,1,0.5,130,0,1);
}
</style>
</head>
<body>
<div>
CSS3-3D transform.-Original
</div>
<b>Rotate X axis </b>
<div id = "test">
CSS-X-axis 3D transforms.
</div>
<b>Rotate Y axis </b>
<div id = "test1">
CSS-Y-axis 3D transforms..
</div>
<b>Rotate Z axis </b><br><br><br><br>
<div id = "test2">
CSS-Z-axis 3D transforms...
</div> <br><br><br>
<b>Matrix 3d </b><br><br><br><br>
<div id = "test2">
CSS-Matrix3D...
</body>
</html>
Output:
