A Pen by owebboy.

index.html

<h1>Hello World!</h1>

On-Hover-Spinning-Text.markdown

On Hover Spinning Text

A CSS transition is changing the color, text-shadow and the transform properties of the

tag

A Pen by owebboy on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Cantora+One);
body {
  background-color: #ecf0f1;
}
h1 {
  font-family: "Cantora One";
  font-size: 5em;
  font-weight: 400;
  text-align: center;
  color: #3498db;
  text-shadow: 2px 1px #2980b9, 3px 2px #2980b9, 4px 3px #2980b9, 5px 4px #2980b9, 6px 5px #2980b9, 7px 6px #2980b9; 
  transition: width 2s, height 2s, color 5s, text-shadow 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s, color 2s, text-shadow 2s;
}
h1:hover {
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
  color: #e67e22;
  text-shadow: 2px 1px #d35400, 3px 2px #d35400, 4px 3px #d35400, 5px 4px #d35400, 6px 5px #d35400, 7px 6px #d35400; 
}