Rotating gradients

by Brodingo

HTML

<div id="box1" class="box">90°</div>
&nbsp;
<div id="box2" class="box">-90°</div>
&nbsp;
<div id="box3" class="box">180°</div>
<br>
<br>
Hover over to see how the gradient should be rotated using bearing angles.
<br><br>
<small>Webkit does not currently support setting rotation degrees for gradients so a pseudo element is used with the default top to bottom orientation.<br><br>Only animated in FF4 and Aurora</small>

CSS

body {
    background: #eee;
    color: #300;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    font-family: sans-serif;
}

.box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 200px;
     -moz-box-shadow: 0px 1px 2px #333; 
  -webkit-box-shadow: 0px 1px 2px #333; 
          box-shadow: 0px 1px 2px #333; 
}

.box:before {
    position: absolute;
    top: -50px;
    right: -50px;
    left: -50px;
    bottom: -50px;
    z-index: -1;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#999)); 
    background-image: -webkit-linear-gradient(#fff, #999); 
    background-image:    -moz-linear-gradient(#fff, #999); 
    background-image:     -ms-linear-gradient(#fff, #999); 
    background-image:      -o-linear-gradient(#fff, #999); 
    background-image:         linear-gradient(#fff, #999);
    content: "↑";
    color: #fff;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    font-size: 72px;
    line-height: 200px;
     -moz-transition: all 0.3s ease-out;  
       -o-transition: all 0.3s ease-out;  
  -webkit-transition: all 0.3s ease-out;  
      -ms-transition: all 0.3s ease-out;  
          transition: all 0.3s ease-out;  
}

#box1:hover:before {
     -moz-transform: rotate(90deg);  
       -o-transform: rotate(90deg);  
  -webkit-transform: rotate(90deg);  
      -ms-transform: rotate(90deg);  
          transform: rotate(90deg);  
}

#box2:hover:before {
     -moz-transform: rotate(-90deg);  
       -o-transform: rotate(-90deg);  
  -webkit-transform: rotate(-90deg);  
      -ms-transform: rotate(-90deg);  
          transform: rotate(-90deg);  
}

#box3:hover:before {
     -moz-transform: rotate(180deg);  
       -o-transform: rotate(180deg);  
  -webkit-transform: rotate(180deg);  
      -ms-transform: rotate(180deg);  
          transform: rotate(180deg);  
}