Rotating text, playing with CSS
Here’s one more example in Html5 using CSS 3 which definitely proves that its fun to play with CSS.
Following is an example of the text rotation using CSS property:
For safari, chrome, etc:
-webkit-transform: rotate(-30deg);
For mozilla:
-moz-transform: rotate(-30deg);
For Opera:
-o-transform: rotate(-30deg);
For Linux:
-khtml-transform: rotate(-30deg);
For ie:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Note that the rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
The example given below rotates text at -30 degrees. Let’s have a look through code:
rotate.html:
<!doctype html>
<html>
<head>
<title>HTML5 rotate</title>
<!–************** CSS ****************–>
<style type=”text/css”>
#textarea {
<!–for firefox, safari, chrome, etc.–>
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);<!– For Opera–>
-khtml-transform: rotate(-30deg);<!– For Lunix–>
<!– For ie–>
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:1.5em;
margin-top:120px;
}
#enter {
width:400px;
margin:20px auto 0;
}
</style>
<!–************** JS ****************–>
function displaytext()
{
document.getElementById(“textarea”).innerHTML=document.getElementById(“txt1”).value;
}
</script>
</head>
<body>
<div id=”enter”>
<p> Enter text: <input type=”Text” id=”txt1″ name=”txt1″ /> </p>
<input type=”button” id=”display” onclick=”displaytext()”value=”Update”/>
<p id=”textarea” > See how you can rotate this Text </p>
</div>
</body;
</html>
You may also like
HTML 5 APIs explained
PHP – AJAX