Rotated div element

testing how to rotate text within a div element for cross browser support

by Randy Crews

HTML

<div runat="server" id="linkPanel" class="searchLeftSidePanel">
      <div class="sideMNButton rtTurn posFirst" id="btn1">
        <div class="innerMNButton">
           <a>Button 1</a>
      </div>
</div>
    
<div class="sideMNButton rtTurn2 posSec" id="btn2">
     <div class="innerMNButton">
          <a>Button 2</a>
     </div>
</div>

CSS

.sideMNButton
{
   color: #000;
   position: absolute;
   background-color: #e9e8ea;
   padding: 2px;
   white-space: nowrap;
   -ms-writing-mode: tb-rl;
   -webkit-transform: rotate(90deg) !important;
   -moz-transform: rotate(90deg) !important;
   -ms-transform: rotate(360deg) !important;
   border: 1px solid #383838;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius: 4px;
   -moz-border-radius: 4px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}

.innerMNButton
{
   padding: 8px;
}

.posFirst
{
   top: 20px;
}

.posSec
{
   top: 100px;
}

.rtTurn
{
   -ms-transform-origin: 15% 15%;
   -webkit-transform-origin: 37% 37%;
   -moz-transform-origin: 36% 36%;
   -o-transform-origin: 0% 0%;
}

.rtTurn2
{
    -ms-transform-origin: 15% 15%;
    -webkit-transform-origin: 37% 37%;
    -moz-transform-origin: 36% 36%;
    -o-transform-origin: 0% 0%;
}