Skip to content

Instantly share code, notes, and snippets.

@wmora

wmora/index.html

Created March 25, 2013 01:49
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 wmora/5234437 to your computer and use it in GitHub Desktop.
Save wmora/5234437 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by William Mora. 2D Transform Demo - A simple demo using the transform property.
Raw
index.html
<html>
<body>
<h1>Hover over the cricles and see what they do!</h1>
<div id="spinner">
<p>
I spin!
</p>
</div>
<div id="skewer">
<p>
I skew!
</p>
</div>
<div id="scaler">
<p>
I get bigger!
</p>
</div>
<div id="matrix">
<p>
Woah!
</p>
</div>
</body>
</html>
Raw
style.css
body
{
background-color: #212121;
color: rgb(255,255,204);
font-family:Arial;
text-align:center;
width:100%;
}
body h1
{
text-shadow: 0.2em 0.2em 1em rgb(255,255,204);
}
div
{
border: 0.2em dashed rgb(255,255,204);
border-radius:100px;
color:#212121;
display:inline-block;
margin: 0 2% 0;
height:200px;
transition: all 1s ease;
width:200px;
}
div:hover
{
background-color:rgba(255,255,204, 0.9);
border: 0.3em solid rgba(255,255,204, 0.9);
}
#matrix:hover
{
transform:matrix(0.586,0.8,-0.8,0.586,40,40);
}
#scaler:hover
{
transform:scale(1.2);
}
#skewer:hover
{
transform:skew(10deg,20deg);
}
#spinner:hover
{
transform:rotate(360deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment