Trying to rotate a pseudo element with a background-image is posing a challenge. The background, positioned at the center of the main element for visual effect, ends up being cut off when rotated.
An illustrative example has been created using random images to demonstrate the issue at hand. Is there a way to rotate the background without it being cut off? Any insight on why this approach is causing the cut-off would be greatly appreciated.
Thank you.
$(document).ready(function () {
'use strict';
$('button').on('click', () => {
$("li").addClass('issue-simulation');
})
});ul {
display: flex;
list-style: none;
padding: 0;
}
ul li {
position: relative;
display: flex;
width: 200px;
height: 200px;
}
ul li:after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background-image: url(https://picsum.photos/180/180);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
transition: 650ms cubic-bezier(0.5, 0, 0.1, 1);
}
ul li:hover:after {
transform: rotate(-10deg);
}
ul li.issue-simulation:after {
background-position: calc(50% + 50px) center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
</ul>
<button>Simulate issue</button>