How to Rotate Clip Path without rotating image? - css

Question

I have an image with CSS property clip-path. I have added animation to rotate the clip path. I want to only rotate clip-path, not the image. From below code, you can get an idea of what I want to achieve. I did this to give you an idea of what I want to achieve. The problem with my code is that it takes a lot of time of manually set clip-path points on each keyframe. So Is there any short method to achieve the below code result without changing the points manually on keyframes?
I want it to be smooth, which is pretty hard to set with manually setting the points.
(Keep in mind, I don't need that last animation which makes the image invisible, I am unable to figure out why it's happening.
#profile-img {
width: 15%;
margin: 5%;
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
animation: clipRotateAnim 2s linear infinite;
}
#keyframes clipRotateAnim {
0% {
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
25% {
-webkit-clip-path: polygon(100% 23%, 80% 0, 47% 34%, 16% 0, 0 19%, 26% 53%, 0 78%, 19% 100%, 51% 71%, 76% 100%, 100% 81%, 68% 51%);
clip-path: polygon(100% 23%, 80% 0, 47% 34%, 16% 0, 0 19%, 26% 53%, 0 78%, 19% 100%, 51% 71%, 76% 100%, 100% 81%, 68% 51%);
}
50% {
-webkit-clip-path: polygon(84% 100%, 100% 75%, 64% 56%, 100% 13%, 81% 0, 49% 28%, 22% 0, 0 29%, 28% 57%, 0 83%, 21% 100%, 42% 74%);
clip-path: polygon(84% 100%, 100% 75%, 64% 56%, 100% 13%, 81% 0, 49% 28%, 22% 0, 0 29%, 28% 57%, 0 83%, 21% 100%, 42% 74%);
}
100% {
-webkit-clip-path: polygon(27% 0, 0 19%, 29% 49%, 0 79%, 19% 100%, 45% 76%, 84% 100%, 100% 80%, 69% 56%, 100% 18%, 80% 0, 47% 33%);
clip-path: polygon(27% 0, 0 19%, 29% 49%, 0 79%, 19% 100%, 45% 76%, 84% 100%, 100% 80%, 69% 56%, 100% 18%, 80% 0, 47% 33%);
}
}
<img id="profile-img" src="https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350">

Answer 1

Use the image as a background of a pseudo element and rotate it in the opposite direction:
.image {
width: 200px;
height: 200px;
margin: 20px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
animation: clipRotateAnim 2s linear infinite;
position: relative;
overflow: hidden;
}
.image:before {
content: "";
position: absolute;
inset: -10%;
background: var(--i) center/cover;
animation: inherit ;
animation-direction:reverse;
}
#keyframes clipRotateAnim {
to {
transform: rotate(360deg)
}
}
<div class="image" style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
</div>
Another idea for better performance is to use background to create another layer above the image that you rotate.
.image {
width:200px;
height:200px;
margin: 20px;
position:relative;
background:var(--i) center/cover;
clip-path: inset(1px);
}
.image:before {
content:"";
position:absolute;
inset: 5px;
box-shadow:0 0 0 200px #fff;
background: conic-gradient(at 140px 140px,#0000 75%,#fff 0) -70px -70px;
animation: clipRotateAnim 2s linear infinite;
}
#keyframes clipRotateAnim{
to{transform:rotate(360deg)}
}
<div class="image" style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
</div>