After successfully setting up CSS rotation for all browsers, I am now looking to achieve the same effect using JavaScript. jQuery is also being utilized in this process with the following code snippet:
.css({ '-ms-filter':"progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=-0.2588190451025207, M21=0.2588190451025207, M22=0.9659258262890683, SizingMethod='auto expand')" });
Unfortunately, the above code is not functioning as expected when implemented inside JavaScript. Despite trying to escape apostrophes, the desired outcome has not been achieved. Any suggestions or ideas on how to make it work properly? The primary objective is to initially set the values with a simple .CSS method and then update them within the provided function:
function rotate(degree){
if((ievers==6)||(ievers==7)||(ievers==8)){
current_obj.css({
/* IE8 */
'-ms-filter':'"progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')"',/* IE<8 */'filter':'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')'});
} else {
/* HANDLE OTHER BROWSERS */ ...
};
rotatetimer = setTimeout(function(){ rotate(++degree); },10 );}
The current implementation works flawlessly across different browsers except for IE7/8 due to the limitation of only allowing 4 rotation options (rotation=x). To resolve this issue, I am exploring the possibility of replacing that line with the .Matrix method and dynamically calculating SIN/COS values during runtime.