CS - Pure CSS Tumbling Object

The Finished Product

Hover your mouse in and out of the container below to see the object tumble.

How It's Done

	<div class="tumbler">
		 <p>Tumbler</p>
	</div>

						

CSS

.tumbler {
   position: relative;
   width: 300px;
   height: 200px;
   margin: 20px auto;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.27),
               0px 0px 40px rgba(0, 0, 0, 0.06) inset;
}
.tumbler p {
   position: absolute;
   left: 5px;
   top: 5px;
   width: 100px;
   height: 100px;
   padding-top: 30px;
   border: 1px dashed #ffffff;
   color: #fafafa;
   text-align: center;
   line-height: 100px;
   font-size: 20px;
   background-color:  #0000ff;
   transition: all 1.5s ease-in-out;
}
.tumbler:hover p {
   left: 194px;
   top: 94px;
   line-height: 5px;
   color: #ffff00;
   border: 3px dotted #ffffff;
   background-color: #ff0000;
   border-radius: 50%;
   transition: all 1.5s ease-in-out;
   transform: rotate(360deg);
}