将剪辑路径从右下角旋转到左下角

Question

我在 css 上有一个按钮：

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

如何从左下角开始动画，但不是正确的？我需要当用户将鼠标悬停在按钮上时，动画应该从左侧开始并从浅色背景转到深色（浅色应该像现在一样在整个按钮上）。请帮忙。谢谢。

Answer 1

您可以通过使用transfomr: rotateY(0.5turn); 旋转90deg 并从right 制作动画来做到这一点。

编辑

更改背景渐变的角度-270deg 将暗面向右移动。

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

Answer 2

您可以使用transform: scaleX(-1) 翻转::after 选择器。您可以将渐变角度更改为90deg，使暗面向右。

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: scaleX(-1);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>