Develop Reference

CSS scaling and centering a page

Why does this work in Firefox, but not in Chrome:
position:absolute;
overflow: hidden;
margin:0;
padding:0;
transform: translate(240px,79.5px) scale(1.2484375);
In translate(x,y) and scale(value), x,y, and value are different for different computers/browsers.
it works for Firefox, but Chrome, does not get scaled or translated.
demo:
**
http://jsfiddle.net/SergioAntonio/kp9yr4m1/
**
its seems like I found a solution:
I changed the JavaScript code from:
document.body.style="transform: translate(240px,79.5px) scale(1.2484375)";
to
document.body.style.transform="translate(240px,79.5px) scale(1.2484375)";
and now it works in chrome.

Have you tried vendor-prefixing it properly?
-webkit-transform: translate(240px,79.5px) scale(1.2484375);
Chrome started natively offering support for transform only in Version 36. For older versions, also for most Android browsers, you will still have to prefix it.

Use like this
.example {
-webkit-transform: translate(240px,79.5px) scale(1.2484375);
-ms-transform: translate(240px,79.5px) scale(1.2484375);
transform: translate(240px,79.5px) scale(1.2484375);
}

how to Rotate image one side using jquery

I am trying to rotate a image only one corner.image is like a pole .bottom side should not be changed the position only top of the image should be animate either clockwise or anti clockwise.i have tried like this.i should work in IE8 also.i made left:53px because bottom should not be change the position.
<style>
.big-pole{
background-image: url("images/pole.png");
width: 55px;
height: 100px;
position: absolute;
top: 78px;
left: 53px;
}
</style>
<script>
TweenMax.to(".big-pole",3,{
top:'100px',
left:'53px',
});
</script>

You could apply CSS class to image without any need of external libraries.
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 8*/
}

I'm not really sure if I understand correctly what kind of rotation you are looking for? Is it like a clock as other users pointed out? Anyway your TweenMax call was missing some parameters in order for the rotation to work.
TweenMax.to($(".big-pole"), 3, {rotation:-90, transformOrigin:"top center"});
You will have test a few things and change a few value to find the correct animation, cause I might be wrong a bit, all depending on what you want to do in the end.

Firefox Javascript div rotation not working, but does work in Chrome and Safari

loadingSpinner2.style['-webkit-transform'] = "rotate(45deg)";
This line doesn't seem to set the rotation of the loading spinner but in Safari and Chrome it does. How do I make it work in Firefox?

I just want to add to #Musa. transform is new CSS3 property, so the full code in CSS will look like
-moz-transform: rotate(45deg); /* For Firefox<16.0 */
-ms-transform: rotate(45deg); /* For IE9 only */
-webkit-transform: rotate(45deg); /* For Safari, Chrome, iOS */
-o-transform: rotate(45deg); /* For Opera<12.10 */
transform: rotate(45deg); /* For all other CSS3 compatible major browser */
so you have to use all of them in this order in your JS, but still it doesn't promise you full browser-support
EDIT As I understand from your coment you're interested in order of using them: usually the most modern property is the last to apply to override all old properties

This is because you are using webkit prefixes (chrome and safari are build on webkit) so they wont work o non webkit browsers like firefox.
For firefox use the -moz- prefix
loadingSpinner2.style['-moz-transform'] = "rotate(45deg)";
For opera there is -o-
loadingSpinner2.style['-o-transform'] = "rotate(45deg)";
for IE (>=10) leave out the prefix.
.rot{
-moz-transform: rotate(45deg); /* For Firefox<16.0 */
-ms-transform: rotate(45deg); /* For IE9 only */
-webkit-transform: rotate(45deg); /* For Safari, Chrome, iOS */
-o-transform: rotate(45deg); /* For Opera<12.10 */
transform: rotate(45deg); /* For all other CSS3 compatible major browser */
}
loadingSpinner2.classList.add('rot');

rotate text 330 degree in IE

is it possible to rotate text in IE
-moz-transform: rotate(330deg); /* FF3.5+ */
-o-transform: rotate(330deg); /* Opera 10.5 */
-webkit-transform: rotate(330deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg)"; /* IE8 */
lines written for IE are not working.
Can any one help.
EDIT.
I want to rotate text crossed

As far as I am aware, rotation in IE is only possible in 90 degree intervals.
Check docs here:
http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

As it was already pointed out, the solution you want depends on the targeted ie version.
You should use all the transforms with different vendor prefixes
-vendor-transform : rotate(330deg);
and for ie versions that do not support css rotation, you can convert the rotation into a filter matrix and apply it to the element.
Here's a site that automatically converts the css3 transform to a filter matrix :
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.8660254037844387,
M12=0.49999999999999994,
M21=-0.49999999999999994,
M22=0.8660254037844387,
SizingMethod='auto expand');
The only downside is that in order to make the transform-origin the center of the element, oyu must provide the width and height of that element.

Have you already tried in this way:
<div id="rotation">Try this rotation</div>​
#rotation
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=..);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
width:100px;
}​
like in this fiddle

Try this new example..
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=0.5, M21=-0.5, M22=0.8660253882408142,sizingMethod='auto expand')"; /* IE6-8 */
This has working
if you want more rotation angle means visit http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm

jquery text rotation

I've got a simple text inside a div, something like the following;
<div id="banner">
<div>This is an example text</div>
</div>
I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?
NOTE: Cufon is also being used.
Update after Codlers answer:
This is the current applied css after the answer of Codler. Works in FF and Chrome.
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/
UPDATE 2:
IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
background-color:transparent;
/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;
position:absolute;
padding : 45px 10px 15px 10px;
The Final working piece of code. Credits for this go toe Jeff and Codler.
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default CSS:
#banner > div
{
-moz-transform: rotate(-20deg); /*FF*/
-o-transform: rotate(-20deg); /*Opera*/
-webkit-transform: rotate(-20deg); /*Safari, Chrome*/
-ms-transform: rotate(-20deg) !important; /*IE9*/
transform: rotate(-20deg); /*CSS3 default*/
background-color:transparent;
zoom: 1;
z-index:1; /*NEEDED FOR IE8*/
width: 191px;
position:absolute;
padding : 45px 10px 15px 10px;
}
CSS FOR IE 7 & 8 - Loaded conditionally:
#banner
{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
padding-top:0px;
}

In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:
-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3
Do you want to rotate something in IE to a different angle? Are you ready for the headache?
You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');
There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.
You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...

It is possible to rotate with css3
transform: rotate(20deg);
Remember that some browser require vendor prefix.
.box_rotate {
-moz-transform: rotate(20deg); /* FF3.5+
-o-transform: rotate(20deg); /* Opera 10.5
-webkit-transform: rotate(20deg); /* Saf3.1+, Chrome
-ms-transform: rotate(20deg); /* IE9
transform: rotate(20deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
zoom: 1;
}
Source http://css3please.com/

It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.

It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answer claims otherwise.
For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.
You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.

Use this tool to generate CSS that will work cross browser:
http://www.useragentman.com/IETransformsTranslator/index.html
It really does work.