Skip to content

Instantly share code, notes, and snippets.

@frengky
Created December 28, 2015 08:58
Show Gist options
  • Save frengky/5d39c61e85cb12433e2e to your computer and use it in GitHub Desktop.
Save frengky/5d39c61e85cb12433e2e to your computer and use it in GitHub Desktop.
CSS border-box, transform syntax with IE9 compatibility
/*
* Box sizing border-box will help to prevent padding inside a container affecting outer size.
*/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/*
* Doing a rotation
*/
div.mydiv {
transform-origin:right top 0;
transform: rotate(90deg) translateY(0%) translateX(100%);
}
/*
* Compatibility only for IE 9
*
* <!--[if IE 9]>
* <link rel="stylesheet" href="style.ie9.css" media="all" />
* <![endif]-->
*/
div.mydiv1 {
-ms-transform: translate(0px, -23px);
}
div.mydiv2 {
-ms-transform: rotate(90deg) translate(-105px,0px);
-ms-transform-origin: 30% 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment