Hi am using css transform in scale property my code is like this
-webkit-transform: scale(1.05); /* Safari and Chrome */
-moz-transform: scale(1.05); /* Firefox */
-o-transform: scale(1.05); /* Opera */
-ms-transform: scale(1.05); /* IE 9 */
transform: scale(1.05);
Here not supported in ie7 letyou known the answer please reply me ASAP.
I'm not sure I understand your question. CSS transforms are not supported in IE8 or older, where you have to have to use an IE matrix filter in order to achieve the same effect (scale or rotate).
Like this (code for IE8 and older, check it live with IE8 or older at http://jsfiddle.net/thebabydino/5XdSy/ ):
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1.05,
M12=0,
M21=0,
M22=1.05,
SizingMethod='auto expand');
Also, your code is CSS and you've put it between div tags.
Older IE browsers don't support CSS transformations. Try using a polyfill like Transformie.
Related
I have the following mixin for cross-browser transform:
.transform (...) {
-webkit-transform: #arguments; /* Chrome, Opera 15+, Safari 3.1+ */
-moz-transform: #arguments; /* Firefox 3.5+ */
-ms-transform: #arguments; /* IE 9 */
-o-transform: #arguments; /* Opera 10.5+ */
transform: #arguments; /* Firefox 16+, IE 10+, Opera */
}
.translate(#x:0, #y:0) {
.transform(translate(#x, #y));
}
And apply it something like the following:
#main {
.translate(280px, 0);
}
But it's not wotk in IE8 and Opera mini. Is there some fallback, polyfill or any for supporting it in therese browsers?
There are a few you can use, the ones suggested from modenizer are:
css sandpaper and transformie.
I'd argue though, that adding pollyfills to older browser like ie8 damages the performance of an already past it browser and lowers the user experience. Also, if you are adding pollyfills to mobile browsers you are adding to the loading times which in a 3g connection might put users off.
i need to rotate image in css for ie6
is it possile
i tried Below code But none of Below is working
.image-box
{
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-sand-transform: <rotate(180deg)>;
}
please help!!!
You're not supposed to have a hyphen before non vendor specific CSS properties. Remove the hyphen from -filter: ...:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
Additionally, you might need to trigger hasLayout by adding overflow:auto or zoom:1 to your CSS. Here is a demonstration (I've tested this in IE7 using browserlabs).
IE6 has limited support, even from MS. You probably should use IE conditional comments to provide a different image or markup for IE6. Here's the MSDN article on these http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
I am trying to rotate a text to 270 degrees, using this code:
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
It works fine in all browsers but not in IE8. What am I doing wrong?
Try using this:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');
-moz-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
-webkit-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
-o-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
IE uses another filter to rotate elements.
Here you can read about it
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
And here you can easy calculate coeffitients of rotation matrix http://www.boogdesign.com/examples/transforms/matrix-calculator.html
Just enter the degree value and it will generate the needed code
You need to add just one line of code:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
IE8 does not support this CSS element.
See: http://social.msdn.microsoft.com/Forums/eu/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866
If you are rotating elements just in IE8+, you'll still need a cross-browser approach. That's because the IE filters are deprecated as of IE9, with IE9 now supporting the CSS3 -ms-transform property. However, for IE8 and earlier, a filter such as BasicImage will be necessary to achieve the effect. So to cater for versions in current use, plus future variations, a prudent approach might be to feed the filter to IE8 and earlier through Conditional Comments, but otherwise use a transform set to cater for current browsers.
or control the rotation to specific degrees with CSS
You can use transform: rotate(35deg). More in this article. For the moment, you have to add in the vendor-specific transforms as well, so for instance (cribbing from the article):
.rotate35 {
/* Safari */
-webkit-transform: rotate(35deg);
/* Firefox */
-moz-transform: rotate(35deg);
/* IE */
-ms-transform: rotate(35deg);
/* Opera */
-o-transform: rotate(35deg);
/* Standard */
transform: rotate(35deg);
}
You can do a 35-degree angle for older IEs that require filter. This will work in IE7 and IE8:
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.81915204, M12=-0.57357644, M21=0.57357644, M22=0.81915204,sizingMethod='auto expand');
Note, however, that the matrix transformation will leave you with a different offset than the CSS3 way shown above. You can compensate on the CSS3 side by setting the -webkit-transform-origin to left top, or on the IE side by positioning your element with a conditional style sheet or CSS hack.
Check out the MS docs or the cool page I used to generate the above.
There is but its CSS3, it of course presents problems when it comes to 'cross-browser' support. But short answer, yes, in CSS3.
Example link: http://www.thecssninja.com/css/real-text-rotation-with-css
Use
-webkit-transform:rotate(35deg);
-moz-transform:rotate(35deg);
transform:rotate(35deg);
for nearly all browsers.
Check this out: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215, more specifically the rotate(angle) function.
Note that this works only in CSS3.
I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that:
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }
Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?
Here's a -90 degree rotation using CSS that should work in IE:
.box_rotate {
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
}
For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.
I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;