- Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, Below example clearly specifies how the element will rotate
- Methods of 3D transforms
Example :
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: black;
border: 3px solid black;
}
div#rotateX {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
div#rotateY {
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg); /* Standard syntax */
}
div#rotateZ {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
<span style="Color:white">CSS # Simple </span>
</div>
<br/>
CSS # Skew X Axis
<div id="rotateX">
<span style="Color:white">CSS # Skew X Axis</span>
</div>
<br/>
CSS # Skew Y Axis
<div id="rotateY">
<span style="Color:white">CSS # Skew Y Axis</span>
</div>
<br/><br/><br/>
<div id="rotateZ">
<span style="Color:white">CSS # Skew Z Axis</span>
</div>
<br/><br/><br/>CSS # Skew Z Axis
</body>
</html>
Output :
No comments:
Post a Comment