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.
Related
Im trying to zoom out my application through css by using
zoom: 90% !important
It works in IE, Chrome and Safari. But it is not working in Firefox. For Firefox im using :
-moz-transform: scale(0.9);
But it does not seem to work. Can you please help me to achieve zoom out feature in Firefox
This question seems to have been already answered here, here and here.
The zoom property is not supported in Firefox and Opera : see ref
You can use -moz-transform: scale(0.9) but you will not get the same result:
body {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: 0 0;
-o-transform: scale(0.9);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.9);
-webkit-transform-origin: 0 0;
transform: scale(0.9);
transform-origin: 0 0;
}
I found quite a few questions here with solutions too, but none seem to work for me. After the scale up, the text is blurry and then it flickers into position. Something wrong with the rendering.
I made a fiddle with the exact structure I'm trying to use, if someone has a solution for it, I'd appreciate it.
I want to underline that I've tried the solutions I found here, but none helped, or I haven't been able implement them as intended.
FIDDLE: https://jsfiddle.net/1yu9p66L/1/
.box1:hover {
-moz-backface-visibility: hidden;
-moz-transform: translateZ(0) scale(1.0, 1.0);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.09);
-moz-perspective: 1000;
-moz-backface-visibility: hidden;
}
PS: Currently testing on FF 45.0.1.
Add transform to the original box that scales it to < 1 and then change the transform in hover state to 1. You'll need to adjust the sizes of the box.
This to .box1, for example:
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
and this to .box1:hover
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
https://jsfiddle.net/1yu9p66L/2/
I have this html character:
<div class="rotate">>></div>
I want this character facing down, for example.
I found this css, it seems not working.
.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
how to rotate?
jsfiddle
Replace webkit-transform: rotate(-90deg); by-webkit-transform: rotate(-90deg); there was typo you missed -.
Fiddle: https://jsfiddle.net/pzawLfgz/3/
If you're trying to rotate a span instead you need to change its display property.
.rotate-span {
display: inline-block;
transform: rotate(18deg);
}
.rotate-div {
transform: rotate(-18deg);
}
<div class="rotate-div">>></div>
<span class="rotate-span">>></span>
.rotate{
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
https://jsfiddle.net/pzawLfgz/2/
and notice this:
It is important that after the special imagined to for old browser
versions CSS commands generally comes last. This then the browser
always delivers the last recognized command and the broadly defined is
better than anything that can even slightly differ in their
implementation. Therefore, please always structured as follows: from
the particular to the general
http://i.stack.imgur.com/yY4pG.png <--- Not enough reputation to post images.
This is how my website looks without any browser zoom on a 27" screen.
I know about this but I dont know how to use it.
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
offsetRatio = (ratio - 1) / 2;
So how do I make my site auto scale??
You can always use this:
width:100%;
http://www.w3schools.com/cssref/pr_dim_width.asp
I'm setting everything in a div tag to appear horizontal. However i have elements in this div tag that i want to appear vertical.
My horizontal styled div is
/* 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);
How would i effectively get rid of this transformation on a seperate div?
If you want to reset it on the child element, undo the rotation ( http://jsfiddle.net/yDGqz/):
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
You might want to set the transform-origin property to change the rotation origin of the element.