Javascript-对角剪切图像

今天我遇到了一个难题，因为我被分配了一个HTML5项目

该项目包括在倾斜的斜坡上移动图片。我将在下图中演示这一点

如你所见，我想把奥巴马的照片从A移到B，在斜坡AB上。移动时，图片被裁剪并受AB线限制。AB线实际上是PNG图像的下边缘

---

致以最诚挚的问候。

以下是HTML和CSS设置：

#TheImage{
    position:absolute;
    top:100px;
    left:20px;
    z-index:1;}

#TheTriangle{
    width: 0px;
    height: 0px;
    border-top: 200px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 800px solid blue;
    top:100px;
    left:15px;
    position:absolute;
    z-index:2;}

    <img id="TheImage" src="http://placekitten.com/200/200" />
    <div id="TheTriangle"></div>

---

以下是HTML和CSS设置：

#TheImage{
    position:absolute;
    top:100px;
    left:20px;
    z-index:1;}

#TheTriangle{
    width: 0px;
    height: 0px;
    border-top: 200px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 800px solid blue;
    top:100px;
    left:15px;
    position:absolute;
    z-index:2;}

    <img id="TheImage" src="http://placekitten.com/200/200" />
    <div id="TheTriangle"></div>

---

您可以尝试使用一些转换来执行此操作：

这个想法是旋转一个外部盒子并包含一个图像，然后旋转里面的图像

演示：

CSS:

  @keyframes "move" {
   0% {
      -webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
      -moz-transform: translateX(0px) translateY(0px) rotate(10deg);
      -o-transform: translateX(0px) translateY(0px) rotate(10deg);
      -ms-transform: translateX(0px) translateY(0px) rotate(10deg);
      transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
      -webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
      -moz-transform: translateX(500px) translateY(70px) rotate(10deg);
      -o-transform: translateX(500px) translateY(70px) rotate(10deg);
      -ms-transform: translateX(500px) translateY(70px) rotate(10deg);
      transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-moz-keyframes move {
   0% {
     -moz-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -moz-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-webkit-keyframes "move" {
   0% {
     -webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-ms-keyframes "move" {
   0% {
     -ms-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -ms-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-o-keyframes "move" {
   0% {
     -o-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -o-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  img {
      height: 100px;
      width: 100px;
      position: absolute;

      -webkit-animation: 5s move infinite;
      -moz-animation: 5s move infinite;
      -ms-animation: 5s move infinite;
      -o-animation: 5s move infinite;
      animation: 5s move infinite;
      z-index: -1;
  }

  div.box {
      margin-top: 50px;
      height: 150px;
      border: 3px solid black;

      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
      overflow: hidden;
  }

HTML:

<div class='box'>
   <img src='http://www.biography.com/imported/images/Biography/Images/Profiles/O/Barack-Obama-12782369-2-402.jpg' />
</div>

---

您可以尝试通过一些转换来实现这一点：

这个想法是旋转一个外部盒子并包含一个图像，然后旋转里面的图像

演示：

CSS:

  @keyframes "move" {
   0% {
      -webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
      -moz-transform: translateX(0px) translateY(0px) rotate(10deg);
      -o-transform: translateX(0px) translateY(0px) rotate(10deg);
      -ms-transform: translateX(0px) translateY(0px) rotate(10deg);
      transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
      -webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
      -moz-transform: translateX(500px) translateY(70px) rotate(10deg);
      -o-transform: translateX(500px) translateY(70px) rotate(10deg);
      -ms-transform: translateX(500px) translateY(70px) rotate(10deg);
      transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-moz-keyframes move {
   0% {
     -moz-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -moz-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-webkit-keyframes "move" {
   0% {
     -webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-ms-keyframes "move" {
   0% {
     -ms-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -ms-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  @-o-keyframes "move" {
   0% {
     -o-transform: translateX(0px) translateY(0px) rotate(10deg);
     transform: translateX(0px) translateY(0px) rotate(10deg);
   }
   100% {
     -o-transform: translateX(500px) translateY(70px) rotate(10deg);
     transform: translateX(500px) translateY(70px) rotate(10deg);
   }

  }

  img {
      height: 100px;
      width: 100px;
      position: absolute;

      -webkit-animation: 5s move infinite;
      -moz-animation: 5s move infinite;
      -ms-animation: 5s move infinite;
      -o-animation: 5s move infinite;
      animation: 5s move infinite;
      z-index: -1;
  }

  div.box {
      margin-top: 50px;
      height: 150px;
      border: 3px solid black;

      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
      overflow: hidden;
  }

HTML:

<div class='box'>
   <img src='http://www.biography.com/imported/images/Biography/Images/Profiles/O/Barack-Obama-12782369-2-402.jpg' />
</div>

您可以从左到右设置图片位置的动画，并使用z索引将奥巴马的图片保留在白色“斜坡”后面。使用绝对定位。一点也不难；使用jQuery。这里没有问题（也没有代码）。@frenchie一开始我也这么认为，但这是图片的下边缘。我不认为一个纯粹的

z-index

解决方案就足够了。请你提供一个你在中所做的示例，而不是平行四边形，只做一个直角三角形ABC，C是你的右下角。这是三角形：您可以从左到右设置图片位置的动画，并使用z索引将奥巴马的图片保留在白色“斜坡”后面。使用绝对定位。一点也不难；使用jQuery。这里没有问题（也没有代码）。@frenchie一开始我也这么认为，但这是图片的下边缘。我不认为一个纯粹的

z-index

解决方案就足够了。请你提供一个你在中所做的示例，而不是平行四边形，只做一个直角三角形ABC，C是你的右下角。这个三角形是这样的：谢谢你，但是会有一个蓝色的盒子，不能透明设置。不，我相信你不会想：它可以设置为白色！我把它放在蓝色，以便您可以看到HTML设置。这个解决方案就是你们老师想要的答案。顺便说一句，我已经想到了。我不能将其设置为白色，因为web背景本身也有颜色！但是，将颜色设置为透明将无法正常工作，然后只需添加一行代码即可获得背景颜色，并添加一行代码即可将该颜色设置为三角形；再写两行代码，就完成了。想到了吗？只要你是对的；您可以使用JS获取和设置颜色，或者简单地将边框设置为与CSS中的web背景相同的颜色。。。您应该编辑您的答案以合并这些选项。你现在的评论让你听起来像一个居高临下的笨蛋，希望这不是你想要的。（事实上，这个答案是4年前的，这并没有改变这一点。这是一个互联网社区，这里的一切都将持续下去。）谢谢你，但会有一个蓝色的盒子，不能透明设置。不，我相信你不会想：它可以设置为白色！我把它放在蓝色，以便您可以看到HTML设置。这个解决方案就是你们老师想要的答案。顺便说一句，我已经想到了。我不能将其设置为白色，因为web背景本身也有颜色！但是，将颜色设置为透明将无法正常工作，然后只需添加一行代码即可获得背景颜色，并添加一行代码即可将该颜色设置为三角形；再写两行代码，就完成了。想到了吗？只要你是对的；您可以使用JS获取和设置颜色，或者简单地将边框设置为与CSS中的web背景相同的颜色。。。您应该编辑您的答案以合并这些选项。你现在的评论让你听起来像一个居高临下的笨蛋，希望这不是你想要的。（事实上，这个答案已经有4年了，但这并不能改变这一点。这是一个互联网社区，这里的一切都将持续下去。）谢谢你，你太棒了，这是我一直在寻找的解决方案谢谢你，你太棒了，这是我一直在寻找的解决方案