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 */
Related
I am using a js counter which works great in FF, Chrome, safari, IE 11-9 but for some reason the transitions are not working in ie 8/7 (see css code below).The top image is the counter in FF, Chrome, safari, IE 11-9. The second image is from ie8/7. Not sure what I am missing, any help would be greatly appreciated! Thanks!
.prev-top {
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
}
.prev-top.flip {
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
}
Unfortunately, transform is not supported in IE<9 (nor indeed is any other form of CSS animation), you will likely need to resort to another means of animation, such as .gifs (shudder)
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.
is it possible to combine all browser compatible tags like -webkit, -moz, -ms, -o for one styling? So for example:
#-webkit-keyframes pulsate,
#-moz-keyframes pulsate,
#-ms-keyframes pulsate,
#-o-keyframes pulsate,
keyframes pulsate {
from {opacity: 1 }
to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
opacity: 0 }
}
If it's not. Is there any document about that to read?
No, it's not possible. However, you can write just the unprefixed version and then use something like -prefix-free or Autoprefixer to add the prefixes for you. Or you can use a preprocessor. You can read a bit more about your options in this article.
If you do want to write everything by hand, the good news is that you don't need the -ms- prefix for animations. IE10 supports them unprefixed, while IE9 doesn't support them at all. So you only need to write this:
#-webkit-keyframes { to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } }
#-moz-keyframes { to { -moz-transform: scale(1.5); opacity: 0; } }
#-o-keyframes { to { -o-transform: scale(1.5); opacity: 0; } }
#keyframes { to { transform: scale(1.5); opacity: 0; } }
You don't necessarily need the from keyframe either. If it's missing it gets automatically generated from the default values or those already specified outside the keyframes.
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
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');