Develop Reference

Transform property does not work in Firefox but does in Chrome and Safari. What to do?

Udate
Appeal for consistency - Mozilla bug
Udate
Adding
transform: rotateY(0deg);
to one side of the card, is a temporary fix that needs to be fixed properly.
The duplicate does not affect this solution and is vague.
Question
Particularly the backface-visibility here:
.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
I tried adding the -moz- prefix despite it supposedly not being needed according to caniuse:
Still it does not work. Chrome worked without any prefix and Safari worked with -webkit- prefix contrary to caniuse.com.
Here is the jsfiddle. Clicking on the icon should make the icon rotate 180 degrees.

Add rotateY(0deg) to your .card__face--front class.
.card__face--front {
transform: rotateY(0deg);
}
http://jsfiddle.net/3h0cgukf/

Skewing text in a paragraph

I want to "wrap" the text like you wrap text around an image but is it possible to do this without an image?
The text on the right is the result I want.

You can use CSS3 transforms.
jsFiddle example
div {
position:relative;
width:300px;
left: 40px;
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 */
}​

It is possible but it can't be done with nice markup.
Have a look at http://www.torylawson.com/index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
http://www.csstextwrap.com/ - is an online tool that may help if you want a 'copy and paste' approach.
http://www.jwf.us/projects/jQSlickWrap - is a jquery plugin for non-ie browsers if IE support is not a requirement.

In modern browsers, you can use transforms but this skews the content (letters) as well.
Example:
http://jsfiddle.net/willemvb/LftMA/

I manage to write my own little script. The idea came from jQSlickWrap with an element for each row.
Here it is: http://jsfiddle.net/m4jLt/1/
It's not perfect yet but with some tweaking I think it will work just fine.
There is three versions in that fiddle. (just so you know)
If you make it better, please do share :)

CSS Drawing on an Angle

My CSS looks as follows:
.block1 {
height:20px;
width:70px;
background-color:#09F;
background-repeat:no-repeat;
position:absolute;
}
This draws a rectangle. Next i would like to draw a rectangle on an angle, such as at 45 degrees. I am not aware of an angle option, how could i do this?

It's not fully supported in all browsers, but you can use CSS Rotation. Here's an article on it.
Basically, apply:
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* WebKit (Chrome, Safari) */
-o-transform: rotate(45deg); /* Opera */
-ms-transform:rotate(45deg); /* IE9 */
transform: rotate(45deg); /* No support currently, but hooray future! */
/* Fun IE code (you should probably put this in a separate css file controlled with conditional comments) */
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865474,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865474,
SizingMethod='auto expand');
/* These are necessary for the IE code only */
margin-left: 5px;
margin-top: -70px;
IE code generated with this tool, which is incredibly useful.

You should use transform (from CSS3) with the value rotate(45deg), and the vendor prefixed property variants:
See: http://jsfiddle.net/JngyN/
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
Making it work properly in older versions of IE is.. difficult.
I recommend that you use this tool which makes it relatively easy:
http://www.useragentman.com/IETransformsTranslator/index.html

here is the IE version for matrix
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071, M12=-0.7071, M21=0.7071, M22=0.7071, SizingMethod='auto expand');

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.

How can you flip website upside down in IE ? (for the April 1st)

We are making April 1st prank in our office, and wanted to flip our corporate website upside down for several hours tomorrow :)
My patch works everywhere but not in IE... Can anyone help ?
<script type="text/javascript">
document.body.style.MozTransform = 'rotate(180deg)';
document.body.style['-webkit-transform'] = 'rotate(180deg)';
</script>

Try this: http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx

A slightly simpler version for IE (no matrix stuff):
body {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Your CSS is specific to webkit and firefox.
You will need to use -ms-transform in IE9, otherwise check out this link for other versions of IE

EDIT: This doesn't work.
Try
body {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-1, M12=-1.2246063538223773e-16, M21=1.2246063538223773e-16, M22=-1, sizingMethod='auto expand');
zoom: 1;
}
Demo: http://static.arounds.org/moz.html
Generated with: http://css3please.com/