Как повернуть svg элемент на 90 градусов

.rotate { 
  display: block; 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  z-index: 99; 
  background-color: #000; 
} 
.rotate-icon { 
  left: 50%; 
  top: 50%; 
  width: 127px; 
  height: 135px; 
  position: absolute; 
  margin: -67.5px 0 0 -63.5px; 
  stroke: #fff; 
} 
.rotate-icon g { 
  transition: transform .3s; 
  transform-origin: center center; 
} 
.rotate-icon:hover g { 
  transform: rotate(-90deg); 
}

<div class="rotate"> 
  <svg class="rotate-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 127 134.1" xml:space="preserve"> 
    <style type="text/css"> 
      .rotate0 { 
        fill: none; 
        stroke-width: 3; 
        stroke-linecap: round; 
        stroke-linejoin: round; 
        stroke-miterlimit: 10; 
      } 
      .rotate1 { 
        fill: none; 
        stroke-width: 3; 
        stroke-linecap: round; 
        stroke-miterlimit: 10; 
      } 
      .rotate2 { 
        fill: #fff; 
        stroke-miterlimit: 10; 
      } 
    </style> 
    <g data-svg-origin="63.45000076293945 67.00000381469727"> 
      <path class="rotate0" d="M65.5,45.4h31.3c4.3,0,7.8,3.5,7.8,7.8v27.6c0,4.3-3.5,7.8-7.8,7.8H30.1c-4.3,0-7.8-3.5-7.8-7.8V53.2 
                               c0-4.3,3.5-7.8,7.8-7.8h12.4H65.5z"></path> 
      <line class="rotate1" x1="27.9" y1="70.2" x2="27.9" y2="63.9"></line> 
    </g> 
    <path class="rotate0" d="M125.5,67c0-34.2-27.8-62-62-62"></path> 
    <path class="rotate0" d="M1.5,67c0,34.2,27.8,62,62,62"></path> 
    <polygon class="rotate2" points="63.5,1.2 59.7,5 63.5,8.9 "></polygon> 
    <polygon class="rotate2" points="63.5,132.9 67.3,129 63.5,125.2 "></polygon> 
  </svg> 
</div>