Skip to content

Instantly share code, notes, and snippets.

@aresnick
Forked from shduff/straighteningDivs.html
Last active August 29, 2015 14:25
Show Gist options
  • Save aresnick/81bd0369a9a663533a31 to your computer and use it in GitHub Desktop.
Save aresnick/81bd0369a9a663533a31 to your computer and use it in GitHub Desktop.
an html snippet to "straighten" up slanted divs on hover

A small example of applying a CSS rotation on hover

This is a small example of using CSS transforms to achieve an animated rotation effect on a div when you hover over the div.

Further doing

Modify the code so that:

  1. …when you hover, the divs also get nudged a little to the right or left
  2. …when you hover, the divs also fade from one background color to another, but over a different time period than the rotation animation (i.e. something other than 0.6s)
  3. …the animations use a different easing function

Further reading

<html>
<head>
<style>
#one,
#two,
#three {
position: absolute;
height: 400px;
width: 300px;
transition: .6s; /* Animate all CSS transitions for #one…#three over 0.6 seconds */
}
#one {
top: 10px;
left: 100px;
background-color: red;
transform: rotateZ(15deg);
}
#two {
top: 240px;
left: 500px;
background-color: blue;
transform: rotateZ(-10deg);
}
#three {
top: 100px;
left: 900px;
background-color: yellow;
transform: rotateZ(20deg);
}
#one:hover,
#two:hover,
#three:hover {
/* If we hover over any of our divs */
transform: rotateZ(0deg);
/* Rotate around the z-axis to 0deg */
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment