How can I make this line rotation work in IE8? I used this to get the ms-filter but still wont work..
Here's a JSFIDDLE.
Heres the HTML:
<div class="mainmenu">
test
</div>
and the CSS:
.mainmenu:before {
background: none repeat scroll 0 0 #333333;
content: "";
display: block;
height: 1px;
position: relative;
right: 12.5%;
transform: rotate(-45deg);
width: 35%;
z-index:10000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}
Any Help Greatly Appreciated.. Thanks
IE8 doesn't support standard CSS3 rotation, but it does have the -ms-filter style, which is capable of doing the same thing (albeit with much more complex syntax, and some annoying caveats).
However, if you're prepared to use a bit of Javascript, I would strongly recommend using a good polyfill script for this, which will allow you to use the standard CSS rotate syntax even for old IE versions.
The best polyfill script I know of for rotation is CSS Sandpaper.
Using this means you can use (near) standard CSS code, which means that (1)your code is more consistent between browsers, and therefore easier to maintain, and (2) you don't need to learn the horrible -ms-filter syntax.
So instead of the -ms-filter code, you'd have a line that looks like this:
-sand-transform: rotate(-45deg);
In addition to rotate, CSS Sandpaper also implements a variety of other CSS3 effects into old IE versions, which makes it a very useful tool.
Hope that helps.
transform: rotate(45deg); /* CSS3 (for when it gets supported) */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
Related
Is there a way to rotate IE7 90% (the whole page)? I tried to rotate body and HTML element 90 degree by using CSS, but scroll bars are displaying because the width and height are not fix the window. I just want to rotate whole html 90% and the width and height are fix the window. Please help me.
How can I do that? (Maybe using CSS or something else). Thank so much.
Sorry about my English.
I have found the following links which may help you:
https://code.google.com/p/jqueryrotate/wiki/Examples
or perhaps:
http://raphaeljs.com/
Raphael supports rotation for IE6 onwards, I hope this helps you in your research.
Use below code that will support in all browser,
/*rotate 60 degrees*/
#rotate60 {
/*General*/
transform: rotate(60deg);
/*Firefox*/
-moz-transform: rotate(60deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(60deg);
/*Chrome, Safari*/
-webkit-transform: rotate(60deg);
/*Opera*/
-o-transform: rotate(60deg);
/*alter opacity*/
opacity:0.6;
filter:alpha(opacity=60);
}
/*rotate 90 degrees*/
#rotate90 {
/*General*/
transform: rotate(90deg);
/*Firefox*/
-moz-transform: rotate(90deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(90deg);
/*Chrome, Safari*/
-webkit-transform: rotate(90deg);
/*Opera*/
-o-transform: rotate(90deg);
/*alter opacity*/
opacity:0.4;
filter:alpha(opacity=40);
}
and use overflow hidden for scrolling part.
I'm trying to skew some text that sits within a div, which is all nice a straight forward, but I am trying to find a way to keep each line completely left justified to one side of the div, as currently the first few lines sit in so many pixels and the last few lines overflow out. The font we're using is already italic but we want to push it a little more with the skew, I know it's not going to look perfect but it works for what we want.
Is there a way to do this? I've tried searching one out already but I'm not sure if I'm looking for the right thing or it's something that's nobody bothers doing.
Heres a basic JSfiddle
and an awful mock up... bad mockup
and the basic code to test it out...
Here is the CSS:
.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
And the HTML:
<div class="box">
<p>Text here - more in the fiddle</p>
</div>
Thanks guys!
This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew completely and give your .box p selector font-style: italic:
.box p {
font-style: italic;
}
JSFiddle demo.
If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew on that:
<article>
<p>...</p>
</article>
.box article {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
Now simply counter that skew on your p element by skewing the same amount in the opposite direction:
.box article p {
font-style: italic;
transform: skew(20deg);
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* Firefox */
-webkit-transform: skew(20deg); /* Safari and Chrome */
-o-transform: skew(20deg); /* Opera */
}
Here I've again added font-style: italic to make the text render italic.
JSFiddle demo.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS rotate property in IE
Can any one help here to rotate the text on IE- 8, IE -7 versions.
it is working on Chome, firefox, IE-9, but doesn`t have any results on IE-8, IE- 7.
BETA
css
a.beta_home{
position: absolute;
text-decoration: none;
top: 12px;
right:0;
margin-left: 0px;
font-size: 9px;
color:red;
border: 1px solid #fff;
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
i wouldn't pref to do it in any browser cause they all render it very different.. but you could do it with javascript
Documentation
http://code.google.com/p/jquery-rotate/
Commands
$('#theimage').rotateRight(45);
$('#theimage').rotateLeft();
This would render it the same in IE 9, chrome, firefox, opera and safari cause its using a canvas object instead of turning the text by browser rendering
It will use the old codings for ie8, 7 & 6 Generate it here
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
Working ex
IE 7&8 tested
Fiddle (margins need to be different in chrome and other browsers cant say why but it does)
If you dont know how to differ css trough out the different browsers see this link
My opinion
Beside all this i would recommend you make it as a picture (already rotated) using photoshop or if your dont have access to such programs use free (GIMP)
Try to use this online service:
http://www.useragentman.com/IETransformsTranslator/
It transform css3 rule
rotate(-90deg)
applied on div with WIDTH: 220px; HEIGHT: 70px;
to IE specific rules:
/*
* The following two rules are for IE only and
* should be wrapped in conditional comments.
* The -ms-filter rule should be on one line
* and always *before* the filter rule if
* used in the same rule.
*/
#transformedObject {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=3.061515884555943e-16,
M12=1,
M21=-1,
M22=3.061515884555943e-16,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: 71px;
margin-top: -78px;
}
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
is there a way to make my website automatically zoom out to 90% ?
Thanks
This can be done with css3 scale attribute but beware that this is not support on all browsers.
http://www.w3schools.com/css3/css3_2dtransforms.asp/
body{
transform: scale(0.9);
-ms-transform: scale(0.9); /* IE 9 */
-webkit-transform: scale(0.9); /* Safari and Chrome */
-o-transform: scale(0.9); /* Firefox */
}
Or with jquery and javascript for cross browser by appending a div around the content off the site and scaling to 90% off the body width;
Something roughly like
var bdwidth = $("body").width();
$("wrapper").width((bdwidth / 100)*90);
Use CSS
body {
-moz-transform: scale(0.9, 0.9); /* Moz-browsers */
zoom: 0.9; /* Other non-webkit browsers */
zoom: 90%; /* Webkit browsers */
}
This worked for me!
I am trying to rotate text by using LESS
Simply, I try the following code but it does not work.
.my-class {
color: #ff0000;
.rotate(90);
}
Here is my jsfiddle http://jsfiddle.net/D2RLR/2750/
Did you try adding a unit? (or an unit Mr president?)
.rotate(90deg)
See MDN about CSS3 transform and rotate for more information. That's what LESS.js or lessphp will output
To make css rotation work on all browsers including ie7 through ie10 using LESS, I am using a mixin like this:
.rotate(#deg: 90) {
/* Safari */
-webkit-transform: rotate(#deg * 1deg);
/* Firefox */
-moz-transform: rotate(#deg * 1deg);
/* IE10+ */
transform: rotate(#deg * 1deg);
/* Opera */
-o-transform: rotate(#deg * 1deg);
/* Internet Explorer */
#IEdeg: round(#deg / 90, 0);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#IEdeg);
}
#divToRotate {
.rotate(270);
}
But you won't be able to run this in js fiddle since this will need to be compiled by lessc compiler or using the less js parser.
You can simply write it in plain CSS, and it will work in LESS: transform: rotate(90deg);.
Try something like this:-
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
Check this link:- http://snook.ca/archives/html_and_css/css-text-rotation
I recommend using the LESS library: LESS Elements it has a mixin for rotate which seems to work in lots of browsers:
.rotation(15deg); Rotates the item by a number of degrees clockwise.