How to make a 90 degree rotation animation for an svg element? On this site, if you open on your mobile and rotate the screen in the landscape, an icon appears, rotate the screen, it is in svg. How to achieve the same effect? Not selenium in svg ((

.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; } 
 <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" style="transform: matrix(1, 0, 0, 1, 0, 0);" 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>

  • And what transform: rotate does not fit? - Yuri
  • when I do a transform: rotate turns off-center - Karalahti
  • one
    Oh, I found that in the center it was turning right, you need to set the transform-origin style: center center to the g tag)))) - Karalahti
  • @Karalahti Can you reformulate the question so that you don’t have to climb third-party sites to understand your question? - Vadim Ovchinnikov

1 answer 1

Use transform to rotate.

 transform: rotate(90deg);

To turn on the center, you need to prescribe the g style:

 transform-origin: center center 

 .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>

  • And without reading the comments, the answer is weak?) - Yuri
  • And in general, the question was not on this topic - Yuri
  • Well, correct, this is a general answer - Crantisz
  • Yes, that's right, it was necessary, everything works - Karalahti