如何将多个转换应用于同一元素

我有一个三角形的图像，我用它来创建一个三角形的马赛克。此图像通过变换(旋转(旋转并置于网格布局中。我需要对布局的行进行动画处理，以便从不同的方向滑动到它们的最终位置，并且我已经使用了转换(平移(。我的问题是动画以原始方向的图像开始，而不是从旋转的方向开始。如何为旋转的图像制作动画？

请参阅指控的图像。 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

没有看到你的代码，很难回答。但我认为发生这种情况的原因是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 中，最后一个匹配项将覆盖所有先前的匹配项。为了解决这个问题，你需要解决这个问题。有四种方法可以执行此操作：

转换

<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

边框完全摆脱transform: rotate()(以及背景图像((有关示例，请参见上文(。这仅适用于90 度旋转
摆脱transform: translate()并使用边距或上/左进行定位。
显式地对每个三角形进行动画处理，以便将变换合并为一个变换。

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

相关内容

最新更新

热门标签：