Rotating a div without rotating its content using CSS3 transformations - html

Question

I have an image and a div over it which is working as a wrapper for the image, I am trying to rotate a square div over let's say 45 deg. to give it a diamond like shape so actually it comes as the image is being cut in a diamond like shape.
The issue is when I rotate the div the image and other things in it also gets rotated than I have to rotate those images back let's say -45deg to bring them to original place.
This is doing above involved a lot of rotating which is almost un-necessary, plus it's really not that simple for me to get it right for images and text of different size etc.
If only I can work out something through which on the above div gets rotated and elements inside it remain like how they are it will be great.
Can anyone suggest anything please?
My markup is:
<div class="wrapper" id="01">
<a href="#">
<img src="image.gif" />
<span class="text" id="text01">Lorem Ispum </span>
</a>
</div>
CSS:
.wrapper {
-webkit-backface-visibility: hidden;
position: relative;
width: 300px;
height: 300px;
margin: 0 30px 0 0;
overflow: hidden;
float: left;
-moz-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-moz-transform-origin: center;
-webkit-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-webkit-transform-origin: center;
-o-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-o-transform-origin: center;
-ms-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-ms-transform-origin: center;
transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
transform-origin: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand');
cursor: pointer;
}
.wrapper img {
width: 700px;
margin: -10px 0 0 -245px;
-moz-transform: rotate(135deg);
-moz-transform-origin: center;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transform-origin: center;
-o-transform-origin: center;
-ms-transform-origin: center;
transform: matrix(-0,-0,0,-0,0,0);
transform-origin: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand');
}
span.text {
background-color: rgba(255,255,255,0.7);
-webkit-transform: rotate(180deg);
margin: -475px 0 0 -1px;
float: left;
width: 296px;
height: 42%;
z-index: 100;
position: relative;
padding: 4px;
display: none;
font-size: 1.2em;
}