Using css transform property in jQuery

Question

How can you specify cross-browser transform controls using jQuery since each browser seems to use its own methodology   Here is the code I am using for Firefox but I can t even get it to work  I think it s because there is no way to tell which transformation  ndash  scale  rotate  skew  ndash  to use       oSlider-rotate   slider        min  10       max  74       step   01       value  24       slide  function e ui                        user-text   css  transform   ui value

User · Answer

If you re using jquery  jquery transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you  It can be as simple as this       element   transition  x  90px      Take it from this link   http   ricostacruz com jquery transit

User · Answer

I started using the  prefix-free  Script available at http   leaverou github io prefixfree so I don t have to take care about the vendor prefixes  It neatly takes care of setting the correct vendor prefix behind the scenes for you  Plus a jQuery Plugin is available as well so one can still use jQuery s  css   method without code changes  so the suggested line in combination with prefix-free would be all you need       user-text   css  transform    scale     ui value

User · Answer

oSlider-rotate   slider        min  10       max  74       step   01       value  24       slide  function e ui                        user-text   css  transform    scale     ui value                                               This will solve the issue

User · Answer

Setting a -vendor prefix that isn t supported in older browsers can cause them to throw an exception with  css  Instead detect the supported prefix first      Start with a fall back var newCss      zoom    ui value        Replace with transform  if supported if  WebkitTransform  in document body style         newCss      -webkit-transform    scale     ui value              repeat for supported browsers else if  transform  in document body style         newCss      transform    scale     ui value               Set the CSS     user-text   css newCss    That works in old browsers  I ve done scale here but you could replace it with whatever other transform you wanted

User · Answer

If you want to use a specific transform function  then all you need to do is include that function in the value  For example       user-text   css  transform    scale     ui value           Secondly  browser support is getting better  but you ll probably still need to use vendor prefixes like so       user-text   css      -webkit-transform     scale     ui value           -moz-transform        scale     ui value           -ms-transform         scale     ui value           -o-transform          scale     ui value           transform             scale     ui value             jsFiddle with example  http   jsfiddle net jehka 230

[javascript] Using css transform property in jQuery

Examples related to javascript

Examples related to jquery

Examples related to css