I found this useful link which explains rotation in IE9
CSS3 transform: rotate; in IE9
unfortunately using either of these does not work
.mark.festival:hover{
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
I have seen in various places that both these rules work for IE9 though mostly I am reading that you need the -ms prefix
http://www.wanderfest.com is the link if you want to check it
the site is not in quirks mode as suggested here
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2567faea-fcea-4ddf-9116-1e2c703ee2e7/
That support on caniuse.com has a caveat: you need to use the MS's filter: This translator will convert CSS3 transforms to MS matrices for filters: http://www.useragentman.com/IETransformsTranslator/
Example:
#transformedObject {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand');
}
Related
Currently working on my custom jquery plugin, which only requires jquery to run.
I don't want to have to include additional 3rd party jquery plugins.
I have a CSS3 animation running on my search button when clicked which works fine except for ie9. CSS is as follows :
.loader {
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
outline:none;
-webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
font-size:0;
line-height:0
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
However it does not work in IE9, is a pure css solution I can do in IE9 to get this working ?
Animation, transition and transformations are not supported in IE9 or lower. There is a support for them from IE 10+, but even in this case there are a lot of issues users find when working with IE. The best thing to do, is to work with javascript. With javascript you can avoid the CSS3 animations and run your results much better even in IE.
For looking at browser compatibility for animations, transitions and transformations look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility
I'm using this css styling :
body{
overflow: hidden;
-moz-transform: scale(1.5);
-moz-transform-origin: 0 0;
}
And it works in FF. Unfortunatelly, I do not know how to do the same thing in other popular browsers (at least, Opera, Chrome and IE).
The various prefixes you might need.
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
Supplied by Autoprefixer as accessed in Codepen.io
Just remove -moz prefix
transform: scale(1.5); /* it works in all modern browsers */
-webkit-transform: scale(1.5); /* it works for iOS and older Chrome*/
-ms-transform: scale(1.5); /* it works in IE < 11 */
Im trying to get this code to work in IE9 and Firefox. It works perfectly fine in chrome
http://jsfiddle.net/THSdP/1/
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#rsSpinner{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 40s;
}
The code only shows the code for Chrome, and it works in there, but I cant seem to get the other prefix sets to work in IE and Firefox.
You haven't defined the animation function for firefox, only for webkit and ms. That's why it's not working in Firefox and IE.
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
Another advice is to put the prefix free at the bottom of the definition.
Here is the working code: http://jsfiddle.net/THSdP/5/
Add this for IE
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
I have created a div and in that div there are three other elements(canvas). I have applied rotation to that div and it perfectly applies to inner elements too in firefox and chrome. But in I.E the rotation is not being applied on inner elements. Is there some special way for i.e?
Here is code for rotaion,
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
-o-transform: rotate(-5deg); /* Opera */
-moz-transform: rotate(-5deg); /* Firefox */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')";
Hi I'm trying to rotate a text, but i'm facing some problems with IE 8 and 9
.casaText{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-filter:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
position:relative;
In IE it doens't rotate. Does anyone can tell me why??
thanks
I would guess it's this property causing the problem:
-ms-filter:rotate(-90deg);
I'm not aware of any proprietary IE filter like that. Try this:
.casaText{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
white-space:nowrap;
position:relative;
}
Use Matrix for the rotation:
Here is for -90deg
filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
There is error in your code
-ms-filter:rotate(-90deg);
For crossbrowser rotation use this syntax from css3please.com, which in your case look like this:
.casaText{
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(-90deg); /* FF3.5+ */
-ms-transform: rotate(-90deg); /* IE9 */
-o-transform: rotate(-90deg); /* Opera 10.5 */
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, sizingMethod='auto expand'); /* IE 6-9 */
zoom: 1; /* IE hasLayout trigger */
}
I used the following and it worked well. I found it from css-tricks.com (which is a great resource gotta say). Anyway, worked for me. I realize this is a bit late - ha - but maybe it will help someone else who find this like I did.
filter:progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12, M21=$m21, M22=$m22, sizingMethod='auto expand');