To rotate text in all browsers is not easy with simple CSS and HTML with out using image. But it's do able and it's really simple. Let's have a text at -45 degree in left top corner of a web page. That will look something like in the image.First we need simple HTML for the text so let's get that out of the way.
<!DOCTYPE html>
<html>
<head>
<link href="rotate.css" rel="stylesheet" />
<!--[if lt IE 9]>
<link href="ie.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<span id="corner-banner">
<em>beta</em>
</span>
</body>
</html>
Then we need some CSS for it. save this as rotate.css.
#corner-banner {
position: absolute;
left: -65px;
top: 25px;
display: block;
width: 200px;
background: #333; /* old browsers */
background: -moz-linear-gradient(top, #333 0%, #000 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#000)); /* webkit */
text-align:center;
font-size:11px;
line-height:13px;
padding:3px 3px 4px 3px;
text-shadow: #000 1px 1px 0;
-moz-transform: rotate(-45deg); /* FF3.5+ */
-o-transform: rotate(-45deg); /* Opera 10.5 */
-webkit-transform: rotate(-45deg); /* Saf3.1+, Chrome */
transform: rotate(-45deg); /* CSS3 (for when it gets supported) */
box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
-moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
-webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
-o-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
}
#corner-banner em {letter-spacing:1px;font-style:normal;font-size:18px !important;color:#fff;text-transform:uppercase;line-height:12px;display:block;}
This will show the banner in the FF, Safari, Opera and Chrome with out any problem but what we do for IE. For IE we will put in this style. save this as ie.css
#corner-banner {
text-align:center;
left: -40px;
top: -40px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}
Now this is for only -45 degree angle to understand how the text rotation work in IE you need to know what is M11, M12, M21 and M22. Well they are the value for the angle in our case it is -45 degree value of cos theta and sign theta. You can get them with your scientific calculator or use the web Scientific Calculator. But how do we know what value to put in for M11, M12, M21 and M22.
well here you go.
M11 = COS THETA,
M12 = SIN THETA,
M21 = -SIN THETA,
M22 = COS THETA
above order will give us -45 degree angel but let's say if we want 45 degree angle then we will use this.
M11 = COS THETA,
M12 = -SIN THETA,
M21 = SIN THETA,
M22 = COS THETA
Only we need to change the M12 and M21 value to +/-.
Hope this helped with rotating text in IE. NO NEED TO USE IMAGES
trigger translate3d mode in webkit to resolve the wonkey text issues in Chrome.
ReplyDelete-webkit-transform: rotate(-45deg) translate3d( 0, 0, 0);
Thanks'.Your post help me. Nice post.
ReplyDeleteExcellent post !!!
ReplyDelete