Question

我正在尝试将倾斜的div从屏幕的左上方移动到屏幕的右下方。我试图获得的效果是，它看起来像是从左上角到左上角出现了平行四边形，并且它以向下和向右的运动在屏幕上缓慢移动，然后从屏幕上移到底部。

现在我有了这个index.html：

<html>                                                                          
  <head>                                                                        
    <link rel="stylesheet" href="index.css" />                                  
  </head>                                                                       
  <body>                                                                        
    <div class="div1" id="one"></div>                                           
  </body>                                                                                                           
</html>

这是我的index.css：

div {
  animation: rotate-all 2s 0 infinite linear alternate;
}

.div1 {
  width: 100px; 
  height: 1000px;
  transform: skew(20deg);
  background-color: gray;
  position: relative;
  margin: auto;
  animation-name: down;
  animation-duration: 4s;
  animation-iteration-count: infinite ;

}

#one {
  top: 150px;
}

@keyframes down {
  0%  {
    transform: translate(-200px, -1000px);
    transform: skew(20deg);
  }
  100% {
    transform: translate(250px, 750px);
  }
}

我有两个问题：

首先，它的形状从倾斜的形状（看起来像“ \”）变为未弯曲的形状（看起来像“ |”）。如果尝试在100％关键帧中添加偏斜，则它不会再移动，它只会停留在同一位置。我试过两个命令都偏斜，然后翻译/翻译然后偏斜。

第二，它似乎不是在屏幕上方开始，而是在屏幕中间。

赞赏任何建议。

Answer 1

您正在覆盖transform属性。变换接受多种样式，以空格分隔。如果您两次添加transform属性，它将覆盖第一个属性。只需将translate和skew放在同一行两次即可。

对于第二部分，translate按百分比（相对于其自身）而不是像素（绝对度量）进行。

div {
  animation: rotate-all 2s 0 infinite linear alternate;
}

.div1 {
  width: 100px; 
  height: 1000px;
  transform: skew(20deg);
  background-color: gray;
  position: relative;
  margin: auto;
  animation-name: down;
  animation-duration: 4s;
  animation-iteration-count: infinite ;

}

#one {
  top: 150px;
}

@keyframes down {
  0%  {
    transform: translate(-200%, -200%) skew(20deg);
  }
  100% {
    transform: translate(250px, 750px) skew(20deg);
  }
}

<div class="div1" id="one"></div>

如何移动倾斜的div

1 个答案: