javascript - 从图像创建旋转矩形

Question

有没有办法将图像切成碎片(45 度旋转矩形)。

这是我在 Internet 上找到的一些代码，它们具有动画并创建图像的矩形。(版本:5) http://plnkr.co/edit/8tcVPYwEskIRfENGnTd6?p=preview

我试图创建旋转的矩形，但可能是当我使用 transform:rotate(45deg) 时，它首先应用背景而不是旋转它。

Edit1:尝试做某事，比如创建一个旋转的 div，其中包含一个以其他方式旋转的 div

<div style="overflow:hidden;transform:rotate(45deg)">
 <div class="tilePiece" style="transform:rotate(-45deg);background-image:url('img.jpg');background-position:XX XX"></div>
...
</div>

(版本:6) http://plnkr.co/edit/8tcVPYwEskIRfENGnTd6?p=preview

Answer 1

可能是 CSS 使用背景图像和瓷砖的提示。 http://codepen.io/gc-nomade/pen/fAHme/

想法是为旋转的图 block 设置白色背景，从而为每个图 block 提供不同的过渡延迟。在此codepen中，我使用sass循环生成关联CSS

$n : 24 ;
div:hover span{@for $i from 0 through $n {
  @if $i > 0 {
    &:nth-child(#{$i}) 
  {
    background:white;
    transition: 0s #{$i/3}s;
  }

}
}
}

wich 给出了 24 条规则，其中 bth-child 递增并且转换延迟也递增。前三个看起来像这样:

div:hover span:nth-child(1) {
  background: white;
  transition: 0s 0.33333s;
}
div:hover span:nth-child(2) {
  background: white;
  transition: 0s 0.66667s;
}
div:hover span:nth-child(3) {
  background: white;
  transition: 0s 1s;
} /* and so on untill 24*/

要从一张图片切换到另一张图片，您需要叠加 2 个元素来反转初始旋转。你可以在两种状态下设置转换，所以最后一个在悬停时淡出的图 block ，将是第一个在鼠标移开时显示的图 block :http://codepen.io/gc-nomade/pen/zronD/

您可以添加剪刀或滑动效果http://codepen.io/gc-nomade/pen/vtzLe/