CODEWITHSUNDEEP
htmlcss
renchan523
renchan523

Reputation: 31

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

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);
}

Upvotes: 3

Views: 3367

Answers (3)

mira šomš&#225;kov&#225;
mira šomš&#225;kov&#225;

Reputation: 21

#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>

Upvotes: 2

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

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>

Upvotes: 6

Playmaker
Playmaker

Reputation: 1456

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:

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

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

Upvotes: 1

Related Questions