I am attempting to rotate or transform a div using the CSS Transform property. Here is my transform CSS Code:
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
transform: rotate(270deg);
The above code works great in all but IE 8. I need to find a way to support IE 8.
How can I create a fallback for IE8?
Note: I am using jQuery (1.8.2), HTML 5 Doctype and modernizr if that makes a difference in the answer you provide. I prefer a CSS only solution but willing to use a javascript/jQuery solution.
Here is a fiddle with the HTML and CSS.
If you see your "filter:" rotation to 3, it will give a 270 degree rotation in IE 8 (and downward to v5.5, IIRC).
http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx
Related
I want to create an animated information bar with CSS3 3D-animations based on the idea of this post.
I was able to recreate the same behaviour which works on Chrome, Firefox and Opera but not in IE: jsFiddle
Now I'm wondering that if there is any way to fix this animation to work in IE too - at least in IE 11?
(The original sample also doesn't work in IE.)
The main trick of this 3D-effect is that you have to create two elements - in this case two span elements - which are perpendicular to each other, and then on some "event" (on a hover or on some change) you rotate the wrapper of these elements by 90 degree:
#info.change #msgWrapper {
-webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
In IE it looks like that this rotation works but the initial layout is wrong.
Unfortunately it is very hard to debug, because the only thing that I can see in the developer toolbar is the transformation matrix - which looks correct...
Any idea on how to fix this stuff to work in IE?
see this Pages :
IE Transforms
3D Hands
Maybe Help you...
I have a div that I'm animating and I'm using the good old translateZ hack to force hardware acceleration:
#random{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
Everything works fine in all browsers, except in safari 5.1. In safari the whole div just does not render, you can mark the text etc, but it's transparent.
Removing the transform solves the problem but is there any other solution?
It should work :
http://caniuse.com/transforms3d
If not maybe try sandpaper plugin:
SANDPAPER
https://github.com/pbakaus/transformie
As above how can i flip image in IE8.
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
This works fine but not in IE8
filter:fliph should work in IE4-8, even without -ms- prefix (which was needed only for early beta versions of IE8). Probably you should add parentheses filter:fliph() as this demo suggests. You can also try the newer IE5.5-9 syntax — filter: DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) (as MSDN recommends).
Older IE versions required the element to have layout to apply filters to it (how to make an element have layout, is described ), but, AFAIK, IE8 doesn't require it.
I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:
But actually looks like this in IE9:
I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.
If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.
I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.
I think you need to use the special syntax for IE:
div.nav-left {
-webkit-transform: scaleX(-1);
/*-ms-transform: scaleX(-1);*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/g2y86/1/
It doesn't look very sharp though, maybe there's a better way.
Edit
For flipping, try with this (note that both -ms-filter and filter lines are for IE) :
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/2cPYR/
From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.
If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.
I used filter: FlipV; to accommodate ie9
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9
I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.