如何对同一个元素应用多个变换

Question

我有一个三角形图像，我用它来创建三角形马赛克。 此图像通过变换（旋转）旋转并放入网格布局中。 我需要为布局的行设置动画以从不同的方向滑动到它们的最终位置，并且我使用了变换（翻译）。 我的问题是动画从原始方向的图像开始，而不是旋转的图像。 如何为旋转后的图像设置动画？

查看被指控的图像。 https://gifyu.com/image/7lbW

编辑 在这里你可以找到我的代码，我确信有更好的方法可以做到这一点，但现在我需要它来尽可能地工作。

#loader-container {
  width: 50vw;
  height: 12vw; 
  max-width: 830px;
  position: relative;
  margin: auto;
}
.top-container {
  position: absolute;
  width: 20vw;
  height: 4vw;
  max-height: 100px;
  max-width: 500px;
  right: 10%;
  margin: 0.25vw;
}
.top {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  width: 100%;
  height: 100%;
}
.triangle {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.blue {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/blue.gif");
}
.green {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/green.gif");
}
.grey {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/gray.gif");
}
.red {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/red.gif");
}
.yellow {
  background-image: url("https://www.hiboucoop-staging.org/wbo/wp-content/uploads/2020/02/yellow.gif");
}
.topright {
  transform: rotate(90deg);
}
.bottomleft {
  transform: rotate(270deg);
}
.bottomright {
  transform: rotate(180deg);
}
.column1 {
  grid-column: 1;
}
.column2 {
  grid-column: 2;
}
.column3 {
  grid-column: 3;
}
.column4 {
  grid-column: 4;
}
.column5 {
  grid-column: 5;
}
.column6 {
  grid-column: 6;
}
.column7 {
  grid-column: 7;
}
.column8 {
  grid-column: 8;
}
.column9 {
  grid-column: 9;
}
.column10 {
  grid-column: 10;
}
.column11 {
  grid-column: 11;
}
.column12 {
  grid-column: 12;
}
.column13 {
  grid-column: 13;
}
.column14 {
  grid-column: 14;
}
.column15 {
  grid-column: 15;
}
.top .row1 {
  grid-row: 1;
  animation: slideupdown 2s 0.2s backwards;
}
.top .row2 {
  grid-row: 2;
  animation: slideleftright 2s backwards;
}
.top .row3 {
  grid-row: 3;
  animation: sliderightleft 2s backwards;
}
@keyframes slideupdown {
  from {
    transform: translateY(-176px);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes slidedownup {
  from {
    transform: translateY(176px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideleftright {
  from {
    transform: translateX(850px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes sliderightleft {
  from {
    transform: translateX(-850px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

<div class="top-container">
      <div class="top">
         <div class="triangle topleft green tt01 column1 row3"></div>
         <div class="triangle topright blue tt02 column2 row1"></div>
         <div class="triangle bottomleft yellow column3 row1"></div>
         <div class="triangle bottomright blue column3 row3"></div>
         <div class="triangle topleft red column4 row2"></div>
         <div class="triangle bottomleft grey column4 row3"></div>
         <div class="triangle bottomleft green column5 row1"></div>
         <div class="triangle topleft yellow column6 row2"></div>
         <div class="triangle bottomleft red column6 row3"></div>
         <div class="triangle topleft green column7 row2"></div>
         <div class="triangle bottomright grey column7 row2"></div>
         <div class="triangle topleft blue column7 row3"></div>
         <div class="triangle topright blue column8 row1"></div>
         <div class="triangle topleft yellow column8 row2"></div>
         <div class="triangle bottomright grey column8 row2"></div>
         <div class="triangle topright grey column8 row3"></div>
         <div class="triangle bottomleft red column8 row3"></div>
         <div class="triangle bottomleft yellow column9 row1"></div>
         <div class="triangle topleft red column9 row2"></div>
         <div class="triangle bottomright blue column9 row2"></div>
         <div class="triangle topleft green column9 row3"></div>
         <div class="triangle bottomright green column9 row3"></div>
         <div class="triangle topleft yellow column10 row1"></div>
         <div class="triangle bottomright red column10 row1"></div>
         <div class="triangle topleft green column10 row2"></div>
         <div class="triangle bottomright grey column10 row2"></div>
         <div class="triangle bottomleft blue column10 row3"></div>
         <div class="triangle bottomleft yellow column11 row1"></div>
         <div class="triangle topleft yellow column11 row2"></div>
         <div class="triangle bottomright grey column11 row2"></div>
         <div class="triangle topleft red column11 row3"></div>
         <div class="triangle bottomright grey column11 row3"></div>
         <div class="triangle bottomleft green column12 row1"></div>
         <div class="triangle bottomleft blue column12 row2"></div>
         <div class="triangle topleft green column12 row3"></div>
         <div class="triangle bottomright grey column12 row3"></div>
         <div class="triangle bottomleft grey column13 row3"></div>
         <div class="triangle bottomright blue column14 row3"></div>
         <div class="triangle bottomleft red column15 row3"></div>
      </div>
   </div>

https://codepen.io/RiccioBastardo/pen/mdJPVyg

Answer 1

没有看到你的代码很难回答。但我认为发生这种情况的原因是transform 在动画中被覆盖了。

这是一个简单的工作示例：

<div class="triangle"></div>

.triangle {
  border: 20px transparent solid;
  border-right-color: red;
  display: inline-block;
  animation-name: example;
  animation-duration: 1s;
  transform: rotate(45deg);
  animation-fill-mode: forwards;

}

@keyframes example {
  from {
    transform: translate(0px, 0px) rotate(45deg);
  }
  to {
    transform: translate(1000px, 0px) rotate(45deg);
  }
}

[编辑]这是作者分享代码后我的建议。

基本上，您为给定元素多次声明transform。在 CSS 中，最后一次出现会覆盖所有以前的出现。为了解决这个问题，您需要解决这个问题。有四种方法可以做到这一点：

1. 转换

<div class="triangle topleft green column7 row2"></div>

类似

<div class="triangle-holder topleft column7 row2">
    <div class="triangle green"></div>
</div>

这允许您在两个不同元素上进行两种不同的转换，而不会相互覆盖（就像原始代码中发生的那样）transform: rotate() 应用于.triangle，而transform: translate() 应用于.triangle-holder

1. 完全摆脱transform: rotate()（以及背景图像），通过使用边框（参见上面的示例）。这将仅适用于 90 度旋转

2. 摆脱transform: translate() 并使用margin 或top/left 进行定位。

3. 明确地为每个三角形设置动画，以便将您的变换组合成一个变换。

我会推荐第二个选项，因为它需要对您的代码进行最少的更改，并且 AFAIK 是创建 CSS 三角形的浏览器兼容方式。