Html5 video perspektive transform

Question

Wäre es möglich, per CSS oder jQuery Video-Perspektive zu setzen, um genau zu passen, wo und wie ich es brauche?

Siehe Bild:

Ich mag das Video im roten Bereich passen.

Vielen Dank im Voraus!

Answer 1

Ja, es ist möglich. Sie müssen sich mit CSS3 transform und perspective Eigenschaften vertraut machen.

.video-wrapper { 
 
    perspective: 1000px; 
 
} 
 
video { 
 
    transform: rotateY(-30deg); 
 
}

<div class="video-wrapper"> 
 
    <video width="400" controls> 
 
    <source src="http://www.w3schools.com/HTML/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="http://www.w3schools.com/HTML/mov_bbb.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

Ohne durch all die Mühe zu gehen, eine Lösung zu erstellen, können Sie ein HTML5 canvas Element