Javascript - 对角剪切图像 [英] Javascript - Clipping image diagonally

问题描述

我已经遇到了一个严重的问题，因为我被分配了一个HTML5项目。

I've come to a tough problem to day as I was assigned a HTML5 projects.

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

The project includes moving a picture on a inclined slope. I'll demonstrate this in the picture below

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

As you can see, I want to move Obama's picture from A to B on the slope AB. And while moving, the picture is cropped and limited by the line AB. The line AB is actually the lower edge of a PNG image.

最好的问候。

推荐答案

尝试这样做一些转换：

这个想法是旋转外框，包括一个图像，然后旋转图像里面。

The idea is to rotate an outside box and include an image, then rotate the image inside.

演示： 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>

这篇关于Javascript - 对角剪切图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！