Skip to content

Instantly share code, notes, and snippets.

@IanLunn

IanLunn/index.html

Created June 20, 2012 14:58
Show Gist options
  • Save IanLunn/2960307 to your computer and use it in GitHub Desktop.
Save IanLunn/2960307 to your computer and use it in GitHub Desktop.
Download ZIP
Transform Origin Indicator
Raw
index.html
<div class="transform origin">
Element to be transformed
</div>
​
Raw
style.css
.transform {
background: blue;
border: solid white 1px;
color: white;
position: absolute;
left: 25%;
top: 25%;
height: 200px;
width: 200px;
-webkit-transform-origin: 50% 90%;
-webkit-transform: rotate(0deg);
}
/*a pseudo-element that represents the origin*/
.origin:before {
left: 50%; /*change this to match the X origin*/
top: 90%; /*change this to match the Y origin*/
/*the rest styles the origin indicator*/
background: white;
border-radius: 5px;
content: "";
position: absolute;
margin: -5px 0 0 -5px;
height: 10px;
width: 10px;
}
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment