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');
Related
I try to find out the problem but since i'm not css guru I need the help.
I have slider and I try to set custom image on slider-thumb.
The issue is: slider-thumb minimum and maximum position do not reach at the end of range:
This is a demo I play with:
DEMO - try to move thumb bottom-up
This is a code (BTW I use Ionic)
<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">
<input type="range" name="volume"
min="0" max="100"
value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer
style="max-width: 8rem;width: 8rem;min-width: 8rem;">
</div>
and css:
.wm-volume-range.range {
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
.wm-volume-range.range i.icon {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.wm-volume-range.range span {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.aa-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 16px;
border-radius: 0px;
background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, #a1a1a1)
);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-size: 48px 24px;
background-repeat: no-repeat;
background-position: 50%;
}
Can anybody help to solve it?
The problem is that when you rotate your thumb it keeps its center and it doesn't reach the end of the track. If you don't rotate it, it works
The easiest way would be to rotate the file image before setting it as the background-image of your range thumb.
Otherwise, you can create a custom thumb and move it to follow the real hidden cursor. You can see an example here (the second range).
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 */
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');
}
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')";
I am using the following in IE9:
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
It works in the way it rotates the text, but oddly it gives the element a black background for no reason?!
The CSS:
.view-see-the-difference-in-your-sector .views-field-title span {
display: block;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom: 1;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
width: 200px;
}
Also notice I have an origin for all browser rotations apart from the filter one.
What is the correct syntax to use here?
I find this hack that fix the problem for me. You should add filter:none; style to the container with black background. Somehow ie9 does not support filter style used for ie8 so you have to disable it. In your case:
.ie9 .view-see-the-difference-in-your-sector .views-field-title span {
filter:none;
}
You have to detect if your browser is ie9 and add this class to some parent node like the body tag.
We were using : transform: rotate(45deg); not working in Chrome and IE9.
First Try : Tried solution given in CSS rotate property in IE, it was not working in IE9.
i.e:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
Solution : Final solution i.e:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
ms-transform: rotate(45deg); /* This Line did the trick for IE9
Found the solution from following URL : http://bugs.jquery.com/ticket/8346