如何在不旋转图像的情况下旋转剪切路径？ [英] How to Rotate Clip Path without rotating image?

问题描述

我有一个带有CSS属性clip-path的图像。我添加了动画来旋转剪辑路径。我只想旋转剪切路径，而不是图像。从下面的代码中，您可以了解我想要实现的目标。我这样做是为了让您对我想要实现的目标有所了解。我的代码的问题在于，在每个关键帧上手动设置剪切路径点需要花费大量时间。那么，有没有一种简短的方法可以实现以下代码结果，而无需手动更改关键帧上的点？
我希望它是平滑的，很难手动设置点来设置。
（请记住，我不需要最后一个使图像不可见的动画，我无法弄清楚它为什么会发生。

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

推荐答案

将图像用作伪元素的背景并旋转相反的方向：

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;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -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;
   overflow:hidden;
}
.image:before {
  content:"";
  position:absolute;
  top:5px;
  bottom:5px;
  left:5px;
  right:5px;
  box-shadow:0 0 0 200px #fff;
  background:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom right;
  background-size:calc(50% - 30px) calc(50% - 30px);
  background-repeat:no-repeat;
  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>

这篇关于如何在不旋转图像的情况下旋转剪切路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！