4

¿Cómo se puede modificar la forma de realizar los keyframes cuando utilizamos transformatrix para que realice, en forma circular, la interpolacion de matrices?

.a1621{
  animation-duration:35s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state:running;
  animation-name:a1621;
  transform-origin:0px 0px 0px ; 
}

@keyframes a1621 {
  0% { transform: matrix3d(1.94872,0,0,0,0,1.94872,0,0,0,0,1.94872,0,-354.819,-265.641,0,1);  }
  100% { transform: matrix3d(1.17277,1.55632,0,0,-1.55632,1.17277,0,0,0,0,1.94872,0,371.155,-630.437,0,1); }
}
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="800" viewBox="0 0 100% 800" enable-background="new 0 0 100% 800" xml:space="preserve">
  <g id="todo"> 
    <g id="1621">    
      <g fill="" stroke="" stroke-width="" name="draga" id="Rectangulo1621" class="a1621" style="transform: matrix3d(1.9487160000000001,0,0,0,0,1.9487160000000001,0,0,0,0,1.9487160000000001,0,-354.819344,-265.64068,0,1)"> 
        <g>
          <rect  stroke="none" stroke-width="" x="324" y="250" width="100" height="60"></rect>
        </g>
      </g>
    </g>                                                              
    <g id="1622">   
      <g fill="" stroke="" stroke-width="" name="draga" id="Rectangulo1622" class="a1622"  style="transform: matrix3d(1.1727689719168597,1.5563169911393604,0,0,-1.5563169911393604,1.1727689719168597,0,0,0,0,1.94872,0,371.1554420221154,-630.4372668228414,0,1)"> 
        <g>
          <rect  fill="rgb(4, 180, 95)" stroke="none" stroke-width="" x="324" y="250" width="100" height="60"></rect>
        </g>
      </g>
    </g>  
  </g>                     
</svg>	

5
  • Por favor, revisa el código que has introducido en tu pregunta y ordenarlo para facilitar a los demás usuarios encontrar una solución. Gracias. el 11 jun. 2016 a las 10:26
  • 1
    A que te refieres con la expresión " en forma circular " ? el 11 jun. 2016 a las 13:43
  • Que tenga el mismo punto de giro el 11 jun. 2016 a las 20:49
  • 1
    Que quieres lograr? podrías explicarte mejor. el 12 jun. 2016 a las 3:31
  • Hola primero gracias por la atención A través de mi pagina web www.animacionesweb.es creo transformaciones donde me genera cada posición con una matriz 4 x 4, Sabiendo las matrices finales de cada transformación las ponemos en el keyframes En movimientos rectos y de escalamiento no hay problema y me genera animaciones de varios svg espectaculares , pero a la hora de animar giros no consigo que la interpolación entre los keyframes lo haga correcto, lo que es sustituir un simple “rotate55 deg “ rotado desde el centro. se me hace imposible aunque el origen y el final sea el correcto el 12 jun. 2016 a las 7:46

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.