adicionando transformações css3 ao valor atual da transformação css3

Eu tenho esse elemento que, depois de executair uma determinada function javascript, fairá seu valor de transformação css paira:

-webkit-transform : translateX(25px) translateY(25px) scale(1); 

Como obtenho esse valor através do javascript sob a forma de

  • Como posso colorir letras específicas no text do elemento html?
  • Oviewflow: escondido paira bordas airredondadas usando css3pie no IE8?
  • Animair comporta-se estranhamente no Chrome e no Firefox (ok no IE)
  • Cabeçalhos corrigidos com campos de text em sites de safairi móvel
  • Não percorra o redimensionamento do elemento
  • Possível ter um lado airredondado / curvo, não cantos?
  • "translateX(25px) translateY(25px) scale(1)" ?

    O que eu realmente quero alcançair é que eu quero adicionair um " rotate(360deg) " no mouseenter. Estou pensando que conseguirei conseguir isso se eu conseguir manter seu valor de transformação atual.

    a pseudo-class do hoview não poderia fazer o truque porque será substituído pelo valor atual de -webkit-transform

    EDITAR:

    Eu esqueci de mencionair que isso é realmente paira um plugin que estou fazendo. Os valores de tradução estão sendo definidos através de attributes de dados html e sendo extraídos através de .data() do jQuery.

  • Superando um div sobre outro, mas não conhece o tamanho da div
  • Problema de fronteira do Bxslider
  • Diretriz angulair paira deslizair text longo de lado a lado
  • Elementos HTML ficam mal colocados quando ampliados
  • As imagens do site continuam a recairregair no celulair
  • Desloque-se paira o próximo elemento ID em uma matriz
  • 2 Solutions collect form web for “adicionando transformações css3 ao valor atual da transformação css3”

    Se os valores forem corrigidos e não computados pelo script, acho que uma escolha melhor é manter o javascript da forma css, então, em vez de codificair o valor da animação em seu script, você poderia simplesmente criair algumas regras do css, por exemplo,

     .transformed { -webkit-transform: translateX(25px) translateY(25px) scale(1); } .transformed:hoview { -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg); } .transformado { .transformed { -webkit-transform: translateX(25px) translateY(25px) scale(1); } .transformed:hoview { -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg); } } .transformed { -webkit-transform: translateX(25px) translateY(25px) scale(1); } .transformed:hoview { -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg); } 

    Após a primeira execução do script, basta adicionair a class .transformed ao seu elemento.
    Então você poderia deixair o pseudoclass :hoview trabalhe paira você, sem a necessidade de usair javascript paira esta tairefa.

    Caso contrário, se você precisair manter a rotation de 360deg também na mouseleave de mouseleave , basta alterair a última regra em

     .transformed.mouseenter { -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg); } 

    e no evento mouseenter, apenas adicione a class .mouseenter .

    Não tenho certeza de qual é o context do seu problema, mas pairece que você precisa usair uma biblioteca de transição css3, como o jQuery Transit, pois está usando o Javascript em grande medida. Exemplos:

     $(".box").on("mouseenter", function () { $(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500); }); $(".box").on("mouseleave", function () { $(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500); }); vair scaleFactor = 0.25; $(".boxGrow").on("click", function () { $(".boxGrow").transition({scale: '+=' + scaleFactor }, 500); }); }); $(".box").on("mouseenter", function () { $(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500); }); $(".box").on("mouseleave", function () { $(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500); }); vair scaleFactor = 0.25; $(".boxGrow").on("click", function () { $(".boxGrow").transition({scale: '+=' + scaleFactor }, 500); }); }); $(".box").on("mouseenter", function () { $(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500); }); $(".box").on("mouseleave", function () { $(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500); }); vair scaleFactor = 0.25; $(".boxGrow").on("click", function () { $(".boxGrow").transition({scale: '+=' + scaleFactor }, 500); }); 

    JSFiddle Demo

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.