En feuilletant une image avec JS/Jquery

Je suis à la recherche de symétrie d'une image. J'ai appris le css fonctionne à l'aide de:

    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";

Je suis à la recherche pour l'appliquer à une image, mais je suis pas sûr de la mise en forme.

J'ai essayé de faire:
var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";

Et puis:
$("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
à un moment plus tard, mais il ne semble pas s'appliquer.

Vous êtes de passage à la fonction css un objet javascript avec 2 propriétés, en haut et à gauche. Où 'top' est une grande chaîne de "2370px-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'"

OriginalL'auteur Glenn | 2013-02-04

  1. 9

    Êtes-vous essayer de faire quelque chose de ce genre?

    $('#image').mouseover(function(){
    $(this).addClass('flipped');
}).mouseleave(function(){
    $(this).removeClass('flipped');
});

    le css:

    .flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

    jsFiddle ici

    +1, bien que cette classe devrait obtenir un nom plus descriptif...
    Pas tout à fait, mais .addClass et .removeClass va certainement faire ce que je veux beaucoup mieux, je pense. Si J' .removeClass car il n'a pas la classe, il va retourner une erreur ou de l'ignorer, le savez-vous?
    Il sera ignoré, jQuery removeClass utilise remplacement de la méthode et remplace donné le nom de classe " ", de sorte qu'il sera tout simplement ne rien faire.
    merci pour pointning que, corrigée 🙂
    Les deux adeneo est correct pour ce dont j'ai besoin. Marquage de cette une seule est la bonne, car elle a été proposée en premier. Désolé adeneo(mais je vous ai donné +1!)

    OriginalL'auteur marbor3

  2. 3

    Je venais d'utiliser une classe, comme suit:

    .flipped {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

    Ensuite, il vous suffit de changer la classe:

    $("#chicken").delay(2000).fadeOut(1, function() {
    $(this).addClass('flipped').show()
           .animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});

    VIOLON

    OriginalL'auteur adeneo

  3. 2

    Je ne suis pas complètement sûr de comprendre ce que vous cherchez.

    Je pense peut-être qu'il peut être fait sans JavaScript? Si vous êtes à la recherche pour inverser le long de l'axe des X, avec un peu d'animation?

    Retournement de l'Image sur le vol Stationnaire

    JSFiddle: Image Flip sur :hover

    Pour cette démo, j'ai dû placer l'image en HTML dans une enveloppe <div>, parce que sinon, le :hover et la scale() changements conflit les uns avec les autres dans funky façons. Vous l'aurez compris si vous retirez l'emballage <div>.

    HTML

    <div class="flippy">
    <img src="http://lorempixel.com/200/200/"/>
</div>

    CSS:

    .flippy>img {
    /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
    transform:scale(1,1);
    /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
    transition:all 600ms ease; }

    .flippy:hover>img {
        /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
        transform:scale(-1,1); }

    Si vous avez besoin de contrôler à l'aide de JavaScript, il devrait être assez facile de remplacer le :hover avec une autre classe, comme .flipped, alors faites comme vous voulez, en JS pour l'activer, il est flip état on et off.

    //Chase.

    Retournement de l'Image sur l'Attribut (cliquez sur base de démo)

    jsFiddle: Image Flip sur l'Attribut

    Dans cette démo, l'image bascule quand a la flipped ensemble d'attributs.

    JavaScript:

    //Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
    if ($(this).attr('flipped'))
        $(this).removeAttr('flipped');
    else $(this).attr('flipped','flipped');
});

    CSS:

    /* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
    transform:scale(1,1);
    transition:all 600ms ease; }

    .flippy[flipped] {
        transform:scale(-1,1); }

    HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> -- comme vous pouvez le voir, nous n'avons plus besoin de la <div> wrapper pour cet exemple, comme l'a :hover les conflits ne sont plus un problème.

    //Chase.

    Je ne souhaite pas l'utilisation stationnaire. C'est à se produire au cours d'une animation.
    J'ai ajouté une autre section et jsFiddle à ma réponse. Cette deuxième démo anime l'image d'être renversé ou unflipped basée sur la présence d'un flipped attribut qui peut être facilement ajouté ou enlevé avec jQuery.
    Pas même un +1? C mon homme! Je ne suis pas payé pour cela XD

    OriginalL'auteur ChaseMoskal

  4. 0
    <style type="text/css">
    .transform-image {     
        -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
</style>
<script type="text/javascript">
  $("#chicken").hover(function(){
           $(this).addClass("transform-image") },   
     function () {
           $(this).removeClass("transform-image");
         };
})
</script>

    OriginalL'auteur Aaron Jones