javascript - Javascript - 对角剪切图像

Question

今天我遇到了一个棘手的问题，因为我被分配了一个 HTML5 项目。

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

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

此致。

Answer 1

您可以尝试通过一些转换来做到这一点：

这个想法是旋转外部框并包含图像，然后旋转内部图像。

演示：http: //jsbin.com/ozusic/1/edit

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>

Answer 2

这是 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>

您可以在这个jsFiddle上查看它现在您所要做的就是调整尺寸，将三角形更改为白色并使用 jQuery 的.animate()函数来更改图像的左侧位置：只需几行代码。既然这是你的作业，我认为最好把它留在这里，等你有点挣扎后再回来看看……顺便说一句，这是一个很好的作业问题。

这里的 javascript 使它与jsFiddle一起工作：

$(document).ready(function () {
    setTimeout(function () {
    $('#TheImage').animate({'left':600}, 2000);
    }, 1000);
});