I am trying to create a rotating object using jQuery and without any other plugin. I saw the perfect way to make it cross-browser without much computation in this link . But when used just like that: ------
div#test {
behavior:url(resource/-ms-transform.htc);
-ms-transform:rotate(45deg);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
But with jQuery CSS like this --------
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)'
});
});
It doesn't seem to work in jQuery CSS mode, but with normal CSS mode it works fine! Can someone explain why this is happening and also provide me with a solution (NOTE: I do not want any jQuery plugin for this solution, please!).
Here is my whole page ------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)',
'-moz-transform':'rotate(45deg)',
'-o-transform':'rotate(45deg)',
'-webkit-transform':'rotate(45deg)',
'-khtml-transform':'rotate(45deg)'
});
});
</script>
<style type="text/css">
div#test {
behavior:url(resource/-ms-transform.htc);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
</style>
</head>
<body>
<div id="test">This is a test!</div>
</body>
</html>
source
share