"Turning PACER Around"

by J. Albert Bowden

HTML

<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.css">
<div>
  <h2 id="normal">RECAP</h2>
</div>
<div id="usd">
  <h2 id="pacer" class="hidden">PACER</h2>
</div>

CSS

h2{
  max-width: 4em;
  margin-top:0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  
}
#pacer {
  color: gray;
}
#usd {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  max-width: 5.8em;
}
.hidden{
  display: none;
}

JavaScript

var p = $("#pacer");
$("#normal").hover(function(e){
  p.removeClass().addClass('animated flipInY');
}, function(e) {
  p.removeClass().addClass('animated flipOutY');
});