Javascript: .css jquery Videoinvertierung

Question

Ich möchte das eingehende Bild (eigentlich Video) durch URL invertieren. Wenn ich versuche, das Bild in HTML zu invertieren, invertiert es einfach die HTML-Schaltfläche. Ich denke vielleicht ist es als Hintergrund definiert. Was ich wissen möchte ist, wie man den Bild (Video) definierten Hintergrund umkehrt. Hier ist meine Quelle.

Quelle

$("body").css("background-image", "url('" + streamImageUrl + "')"); 

streamImageUrl ist URL, die als ?action=stream definiert.

Kurz gesagt,

proc 1) umkehren nach oben und unten mein Bild.

proc 2) Biegen Sie links und rechts Bild, was in proc umgekehrt 1.

Danke.

Answer 1

Legen Sie das Hintergrundbild in einem separaten Element fest, das die Breite und Höhe der Seite und position: fixed umfasst.

Verwenden Sie CSS3 scaleX oder scaleY auf -1, um das Element entsprechend horizontal oder vertikal umzukehren. Sie können auch CSS3 rotateX und rotateY verwenden.

Beispiel: http://jsfiddle.net/oqy2L73u/

Answer 2

Verwenden transform: rotate3d() jedes HTML-Element zu drehen.

iframe { 
 
    transform: rotate3d(0,1,10,180deg); 
 
}

<iframe width="420" height="315" 
 
src="http://www.youtube.com/embed/lgZBsWGaQY0?autoplay=1"> 
 
</iframe>

Answer 3

Sie können diese transform mit CSS erreichen.

$('#rotateVideo').click(function(){ 
 
    $('video').toggleClass('rotatevideo'); 
 
}); 
 
$('#mirrorVideo').click(function(){ 
 
    $('video').toggleClass('mirrorvideo'); 
 
});

.rotatevideo{ 
 
    -moz-transform:rotate(180deg); 
 
    -webkit-transform:rotate(1800deg); 
 
    -o-transform:rotate(180deg); 
 
    -ms-transform:rotate(180deg); 
 
    transform:rotate(180deg); 
 
} 
 
.mirrorvideo{ 
 
    -moz-transform: scaleX(-1); 
 
    -o-transform: scaleX(-1); 
 
    -webkit-transform: scaleX(-1); 
 
    transform: scaleX(-1); 
 
    filter: FlipH; 
 
    -ms-filter: "FlipH"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video width="320" height="240" autoplay src="https://cdn.glitch.com/237f9e5e-9593-4123-a05c-eff4a2b38f99%2FCaliper_logo_video.ogg?1499957478610"></video> 
 
<br/> 
 
<button type="button" id='rotateVideo'>Rotate Video</button> 
 
<button type="button" id='mirrorVideo'>Mirror Video</button>