Wie kann ich Transform3D Wirkung

Question

Ich mag erhalte einen ähnlichen Effekt wie in Schiebern von https://www.360websitedesign.in/ auf gerade und Bild von mir für die ganze Breite des webpage.I versucht, die folgenden Code aber nicht geben gewünschten effects.Also ich tue erhalten Es ist in WordPress also, wenn es ein Plugin gibt, das einfach damit aushelfen kann.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
window.onload=function(){ 
$("#content").fadeOut(4000); 
$("#background").addClass("zoom"); 
setTimeout(function(){ 
//$("#background").removeClass("zoom"); 
},5000); 
} 

</script> 
<style> 
body{ 
    margin:0px; 
    padding:0px; 
    width:100%; 
    height:100%; 
} 
#background{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:50%; 
    height:50%; 
    background:url("https://www.360websitedesign.in/wp-content/uploads/2016/03/home-page-banner3.jpg") center center no-repeat; 
    background-size: 100% 100%; 
    display:inline-block; 
    z-index:2; 
    transition:all ease 4.1s; 
    /* transform:scale(1,1);*/ 
} 
#content{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    z-index:3; 
    background-color:rgba(0,0,0,0.5); 
    color:#ffffff; 
    font-size:50px; 
} 
.zoom{ 
    transform: translate3d(200px, 200px, 0px); 
} 
</style> 
    <div id="background">  
    </div> 
    <div id="content"> 
    <center><br /><br /><br /><br /><br /><br /> 
     Watching... 
    </center> 
    </div> 

Answer 1

Check this basic fiddle here

Another fiddle using img tag

Sie Ken Burns Effekt mit CSS3 erreichen können wie folgt

Ihre grundlegende CSS wird (Sie entsprechend Ihrer Anforderung variieren kann und Browser),

#background{ 
    animation: kenburns 10s infinite; 
} 

@keyframes kenburns { 
    0% { 
     opacity: 0; 
    } 
    5% { 
     opacity: 1; 
    } 
    95% { 
     transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px); 
     animation-timing-function: ease-in; 
     opacity: 1; 
    } 
    100% { 
     transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px); 
     opacity: 0; 
    } 
} 

Updated fiddle for full width background

Zoom in to zoom out effect