从图像中创建旋转的矩形

Question

有没有办法将图像切成像（45度旋转矩形）的碎片。

这是我在互联网上找到的一些代码，它有动画并创建图像的矩形。 （版本：5） http://plnkr.co/edit/8tcVPYwEskIRfENGnTd6?p=preview

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

编辑1：尝试做某事就像创建一个旋转的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/

的想法是为旋转的图块设置白色背景，使每个图像在转换中有不同的延迟。在这个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;
  }

}
}
}

给出了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个元素以反转初始旋转。 你可以设置两种状态的转换，所以最后一个在悬停时淡出的图块将是第一个在鼠标移出时显示：http://codepen.io/gc-nomade/pen/zronD/

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

Answer 2

我做到了:) （第10版） http://plnkr.co/edit/8tcVPYwEskIRfENGnTd6?p=preview

代码非常混乱，但我会清理一下，我会尝试其他动画。