aresnick/_css-rotate.md

## _css-rotate.md

      
    Raw
  

              _css-rotate.md
            
          
    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:

…when you hover, the divs also get nudged a little to the right or left
…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)
…the animations use a different easing function

Further reading


MDN's page on CSS transforms and transitions
This tutorial on CSS rotations and transformations.


## css-rotate.html
<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>
	<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>