Use CSS to flip/rotate horizontally an SVG from center only works with image - HTML CSS SVG

HTML CSS examples for SVG:Image

  1. HOME
  2. HTML CSS
  3. SVG
  4. Image

Description

Use CSS to flip/rotate horizontally an SVG from center only works with image

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.slidecaption {<!--  w ww.ja v  a2  s  . c om-->
   -webkit-animation-name: spinner;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 2s;
   animation-name: spinner;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: 2s;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   transform-origin: center center;
}
@-webkit-keyframes spinner {
   from
   {
      -webkit-transform: rotateY(0deg);
   }
   to {
      -webkit-transform: rotateY(-360deg);
   }
}
@keyframes spinner {
   from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
   }
   to
   {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
   }
}


      </style> 
 </head> 
 <body> 
  <img class="slidecaption" src="https://www.java2s.com/style/demo/Opera.png"> 
  <br> 
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 157.144 210.706" width="200"> 
   <path class="slidecaption" fill="red" 
      d="M78.394 210.706c-11.247-13.16-22.162-25.304-32.368-38.017-16.016-19.95-30.158-41.092-39.98-64.948-19.25-46.76 
      9.943-94.135 52.535-105.196 45.651-11.856 91.876 19.016 97.966 65.671 2.028 15.534-1.288 29.968-7.385 44.017-11.15 
      25.692-27.51 48.023-45.258 69.398-7.965 9.593-16.436 18.766-25.51 29.075zm52.722-131.714c.046-29.268-23.232-52.857-52.283-52.982-28.984-.125-52.775 
      23.526-52.815 52.506-.041 29.231 23.339 52.858 52.341 52.895 29.291.038 52.712-23.233 52.757-52.419z" /> 
  </svg>  
 </body>
</html>

Related Tutorials