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
Post a Comment