I want to rotate boundary lines 45 degrees while keeping img fixed in css
I am trying to rotate the boundary lines 45 degrees while keeping the img fixed when you hover over the img.
Any ideas how to implement them in css?
At this point, both my boundary lines and my IMG are rotating 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);
}
source to share
You can simply counter the rotation of 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 is rotating. Note that you also need to add broadcast properties to the image, not just.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>
source to share
#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>
source to share
The problem is that the children are NOT rotated WITH "transform: none;" or without it.
The parent rotates, so the non-rotating child also rotates.
So, your possible solutions might be:
- rotation of inverse children (for example, if parent rotate (45deg) then child should rotate (-45deg))
- Use absolute position so that children overlap with their parents, but not be contained by them
Source : Prevent children from inheriting css3 transform Credit: @Webars
source to share