Skip to content

Instantly share code, notes, and snippets.

@Holek
Forked from anonymous/dabblet.css
Created February 1, 2012 14:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Holek/1717385 to your computer and use it in GitHub Desktop.
Save Holek/1717385 to your computer and use it in GitHub Desktop.
CSS3 rotation with transform-origin working with IE 7+
/**
* CSS3 rotation with transform-origin working with IE 7+
*/
#some_block{
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
/* Saf3.1+, Chrome */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 100% 100%;
/* FF3.5+ */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 100% 100%;
/* IE9 */
-o-transform: rotate(-90deg);
-o-transform-origin: 100% 100%;
/* Opera 10.5 */
transform: rotate(-90deg);
transform-origin: 100% 100%;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0, M12=1, M21=-1, M22=0,
direction=135, sizingMethod='auto expand');
zoom: 1;
padding: 0 4px 4px 4px;
background: #ccc;
border: 1px solid #505050;
font-size: 1.2em;
background-color:#900;
width:125px;
color: #FFF;
padding: 6px;
text-align: center;
font-size: 120%;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
<!-- content to be placed inside <body>…</body> -->
<div id="some_block">Some text</div>
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment