Recently in one of the projects we did have a requirement to show the terms & conditions in a vertically aligned format while all other contents in the page has to display in horizontally aligned format.
The solution that we have found out, works well with all the IE versions from 6 onwards and all the Mozilla versions from 3.1 onwards.
The following HTML content will do the job
<head>
<style>
.notrans {
width: 300px;
border:4px solid #ff0000;
}
<style>
.notrans {
width: 300px;
border:4px solid #ff0000;
}
.trans {
width: 300px;
border:4px solid #ff0000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
<div class="notrans">An element without translation</div>
<br /><br />
<div class="trans">An element translated horizontally by 100px</div>
</body>
width: 300px;
border:4px solid #ff0000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
<div class="notrans">An element without translation</div>
<br /><br />
<div class="trans">An element translated horizontally by 100px</div>
</body>
No comments:
Post a Comment