1

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;
}
Maven
  • 14,587
  • 42
  • 113
  • 174
  • 1
    You wrote "I have an image and a div". In your presented code there is no DIV at all!? Your code also looks semantically very questionable. Which Doctype do you use? And if I got you right, you just want a "border" around your image and text that is rotated by 45°, right? So it might be best to not place the image and the text as child elements of the element that will be rotated. Does the image really belong to the content, or is it a "background-image"? – Netsurfer Sep 15 '13 at 10:11
  • sorry corrected now, i was trying to do it with a span which is an inline element as there are multiple of these occurring in one line. however i have corrected the code. and the image is part of the content `img` not a background image. – Maven Sep 15 '13 at 10:26
  • Well, I actually couldn't think of any other (semantically) solution as to rotate the wrapper and rotate its children back. – Netsurfer Sep 15 '13 at 10:39
  • doing it makes the image go blurry and text also gets a little odd, dont know why but it does. – Maven Sep 15 '13 at 10:47
  • Found a related question [**Prevent children from inheriting rotate transformation in CSS**](http://stackoverflow.com/questions/9513588/prevent-children-from-inheriting-rotate-transformation-in-css). The only other solution I might think of is the one I mentioned in my first comment. You have to use some kind of "overlay" ..., but all this leads to additional element(s) which is/are "presentational markup". So it's all bad, and personally I would avoid it. – Netsurfer Sep 15 '13 at 10:56

0 Answers0