Menu
Or more generally, is there a way to add arbitrary CSS to an HTML element in javascript without JQuery?
Right now this works in Chrome, Firefox and IE 9/10.
var css = getRotationCSS(angle);
var div = document.getElementById('mydiv');
//div.css = css; ???
div.innerHTML = '<div style="'+css+'">HELLO</div>';
I have to add a div inside the div to get to style=''
All the examples I've seen just have a hardcoded angle but I need it to work for any angle 0-360, should I make 360 classes, 1 for each degree, then set the class?
function getRotationCSS(deg)
{
return "\
-webkit-transform: rotate("+deg+"deg); \
-moz-transform: rotate("+deg+"deg); \
-ms-transform: rotate("+deg+"deg); \
-o-transform: rotate("+deg+"deg); \
transform: rotate("+deg+"deg); \
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \
";
}
Yes the IE 7/8 code is not correct, I need a function to convert the degrees to a matrix.
Also the IE 7/8 code doesn't rotate it at all when I emulate IE 7/8 in my IE 10. I googled the code and it's supposed to rotate it by 45:
<html>
<body>
<div style='border:1px solid green;margin:333px;padding:333px;'>
<div style="
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');
">
HELLO
</div>
</div>
</body>
</html>
271
Use the following to create the correct rotation matrix for deg:
// First compute deg in radians
var rad = deg*Math.PI/180;
// Then when specifying the rotation matrices use:
'... M11=' + Math.cos(rad) +
', M12=' + -Math.sin(rad) +
', M21=' + Math.sin(rad) +
', M22=' + Math.cos(rad) + ' ...'
Also for ms-filter don't use single quotes, since you use single quotes within the string for 'auto expand' Change your outer quotes to double quotes and escape them properly:
-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
