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')";
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 have a div with a border-radius, which is rotated using keyframes.
Look at this Fiddle in firefox.
To replicate the problem: let the window size be less than the circle drawn on the page(both in height and width).
Now the problem is that the parent of the rotating div, i.e. body in this case, is resizing to a larger width at some points while the rotation is going on.
The same code in Chrome appears like the parent is resized to a greater width and height once and then it becomes stable.
My question is (even though I have rotated the circle within parent with radius = r): why does the parent width and height increases to greater than r while rotating the div?
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='circle'>
rotated
</div>
The problem:
This (odd) behavior is caused because , what you are rotating isn't really a circle, its actually a block(inline block), which has four corners, just a square.
When you define a border radius it is not changed to a circle, instead its borders become rounded, the element is still a square.
Now, before you rotate the div(circle), which actually is a square, its parent has a width & height equal its child(by default, since it is the only child of its parent in your case),
i.e say width=height= r.
now when you rotate the div, so you rotate a square, and thus when, the square comes diagonally horizontal( or vertical), it gets the maximum height & width.
i.e diagonal=√2r, thus, height = width= √2r i.e 1.41*r, this is surely 41% greater than the original radius of the circle.
Now, this is where the parent is increased in width and height.
The solution:
The solution is quite simple, wrap your circle with a parent, and let it hide the overflow. See this Fiddle
now this does not actually make the element itself circular, but will remove excessive, space outside the circle, which overflows the parent.
.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='parent'>
<div class='circle'>
rotated
</div>
</div>
i tried to reproduce a problem, that occurs in a special combination: windows7 + chrome + soundclouds iframe widget - this problem does not occur on firefox, nor does it seem to exist on mac systems:
if i include soundcloud's iframe within a rotated div over another (back-)rotated div, everything is blurry after the iframe:
http://jsfiddle.net/aqbyhqr1/10/
css code:
.outer {
background-color: red;
width: 100%;
-ms-transform: rotate(1deg); /* IE 9 */
-webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
transform: rotate(1deg);
}
.inner {
-ms-transform: rotate(-1deg); /* IE 9 */
-webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
transform: rotate(-1deg);
/* this or backface-visibility: hidden; does not fix the problem */
-webkit-transform-origin: 50% 51%;
-ms-transform-origin: 50% 51%;
transform-origin: 50% 51%;
}
on what i currently work, it's even worse:
i found some advise here to use backface-visibility: hidden; and/or transform-origin: 50% 51%;, but it did not change anything.
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');
}
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');