smarttechy smarttechy - 4 months ago 13
CSS Question

How do I obtain transform3d effect

I want to obtain the effect similar in slider of https://www.360websitedesign.in/ on just and image of mine covering the whole width of the webpage.I tried the following code but not giving desired effects.Also I'm doing it in WordPress so if there is a plugin that can just help out with this.

<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

Check this basic fiddle here

Another fiddle using img tag

You can achieve Ken Burns effect using CSS3 as follows,

Your basic CSS will be (You can vary according to your requirement and 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;
   }
}
Comments