Rotate a block element [duplicate] - html

This question already has answers here:
How to rotate a <div> 90 degrees?
(6 answers)
Closed 9 years ago.
Is it possible to rotate a block-level box, generated by block element relative to this geometrical center. E.g. as follow:

You can use CSS transform:
transform: rotate(-200deg);
-ms-transform: rotate(-200deg); /* IE 9 */
-webkit-transform: rotate(-200deg); /* Safari and Chrome */
Demo
The transform property is supported in Internet Explorer 10, Firefox, and Opera. You do not need to use CSS prefixes for these.

-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transform: rotate(30deg);

The property transform in CSS3 does this. You need to use vendor prefixes for some browsers.
Here is an example: http://jsfiddle.net/gfEL5/
-moz-transform: rotate(30deg); /* FF after 3 and before 16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Opera after 10.5 and before 12 */
-webkit-transform: rotate(30deg); /* current Chrome, Safari, Opera */
transform: rotate(30deg); /* IE after 10, FF after 16 */
It rotates around the center by default, but you can set another transform-origin as well. More about this: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Related

Rotate IE7 90 degree

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.

resize to fit the screen using css

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

Automatically zoom out the whole website on Magento?

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!

CSS3 Rotation issue

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.

Vertical text showing in all browsers except Internet Explorer

This is really blowing my mind right now!
span.verti{
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*IE6,IE7 */
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
writing-mode:lr-bt;
-ms-writing-mode:lr-bt;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
opacity:1 !important;
}
Image example in firefox: http://accelerateonline.net/work/ghai/images/firefoxscreenshot.png
Image example in IE 9: http://accelerateonline.net/work/ghai/images/fullscreenshot.png
Hard to tell without the code.
IE does have a proprietary piece of code for rotation:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
rotation=1 Content is rotated 90 degrees.
rotation=2 Content is rotated 180 degrees.
rotation=3 Content is rotated 270 degrees.
Might work?