javascript - RotateY and Perspective animation not working properly in chrome? -


i want rotate image in y direction . code follows

js part

 $(function () {        $("#content").click(function () {           var css = {               'transform': 'perspective(2000px) rotatey(-25deg )',                   'transition-duration': '500ms'           };           $("#content").css(css);       });   }); 

css part

 #mainpage{     height: 100%;     width:100%;     position: absolute;     top:0;     left:0;    }   #menubar{     height: 100%;     width:100px;     position: absolute;     top:0;     left:0;     background: #ff0000;   }   #content{     height: 100%;     width: 100%;     position: absolute;     top:0;     left:0;     background-image:url(images/clubs/informals.jpg);     background-size:100% 100%;   } 

html part

<div id="mainpage"> <div id="menubar"></div> <div id="content"></div> </div> 

the code working in firefox. in chrome perspective effect comes after animation complete. in ie animation not working changes final position. tried adding prefix '-webkit-' still having same problem.

you need yo use browser specific -webkit- transform

transform:rotate(7deg); -ms-transform:rotate(7deg); /* ie 9 */ -webkit-transform:rotate(7deg); /* safari , chrome */ 

to prevent jquery becoming unmanagable may beneficial put these values within class , add class rather css


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -