I want to rotate the border lines 45 degrees while keeping the img fixed in css

Question

I'm trying to rotate the border lines 45 degrees while keeping the img fixed when you hover over the img.

Any ideas how to do them in css?

As of now, both of my border lines and my img rotates at the same time.

HTML

<div id="button" class="rotate">
        <div id="button_box_frame" class="no_rotate">
            <a><img src="pics/show_window1.jpg" class="no_rotate"></a>
        </div>
</div>

CSS

#button{
    margin-left:200px;
    margin-top:200px;   
    border:3px solid;
    overflow:hidden;
    height:200px;
    width:200px;
}

#button_box_frame img{
}

#button img{
}

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

Possible duplicate of: http://stackoverflow.com/questions/7045140/prevent-children-from-inheriting-transformation-css3 — Playmaker, Dec 11 '14 at 10:14

score 6 · Accepted Answer · answered Dec 11 '14 at 10:15

You can just counter the rotation on the image by adding negative values (-webkit-transform:rotate(-45deg);) which will rotate it in the other direction. This will keep the image in place while the container rotates. Note that you also have to add the transtions properties to the image and not just to .rotate

#button{
    margin-left:200px;
    border:3px solid;
    overflow:hidden;
    height:200px;
    width:200px;
}

#button_box_frame img{
}

#button img{
}
.rotate img,
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

.rotate:hover img 
{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

<div id="button" class="rotate">
        <div id="button_box_frame" class="no_rotate">
            <a><img src="http://placehold.it/200x200" class="no_rotate"></a>
        </div>
</div>

is there anyway that i can add text in the background of the frame? So, whenever you hover over, the frame rotates and the text appears. — renchan523, Dec 14 '14 at 06:59

score 2 · Answer 2 · answered Jan 27 '16 at 10:35

#button{
    margin-left:200px;
    border:3px solid;
    overflow:hidden;
    height:200px;
    width:200px;
}

#button_box_frame img{
}

#button img{
}
.rotate img,
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

.rotate:hover img 
{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

<div id="button" class="rotate">
        <div id="button_box_frame" class="no_rotate">
            <a><img src="http://placehold.it/200x200" class="no_rotate"></a>
        </div>
</div>

score 1 · Answer 3 · edited May 23 '17 at 12:15

The problem is that children elements do NOT rotate WITH "transform: none;" property or WITHOUT it.

The parent element is rotated, so unrotated child seems to be rotated too.

So your possible solutions may be:

inverse children element rotation (for ex, if the parent has rotate(45deg), then child must have rotate(-45deg) )
Use absolute position, so that children overlaid their parents, but were not contained in them

Source: prevent children from inheriting transformation css3 Credit: @Webars

I want to rotate the border lines 45 degrees while keeping the img fixed in css

3 Answers3