特定のポリゴン境界内で画像 (以下を参照) を変換する方法を見つけようとしています。画像がこの境界線を超えている場合は、画像のこの部分をカットしたいと思います。クリップ（時代遅れでポリゴン形状がない）とクリップパス（画像内の境界線を移動するのではなく、画像自体をカットする）コマンドを使用しようとしましたが、今まで有用な結果はありませんでした。
今のところ、すべての内容を含む私のボックスのコード スニペット:
<div id="box">
<span class="b0"><img src="..."></span>
</div>
次のように、css で webkit-transform コマンドを使用して画像を変換します。
#box .b0
{
webkit-transform : animate1 30s 0s infinite;
}
そして、私のアニメーションは次のように与えられます:
@keyframes animate1
{
0% { -webkit-transform : translateX(0px); }
100% { -webkit-transform : translateX(-100px); }
}
このキーフレームはすべて、さまざまなブラウザー タイプ用に変更されており、問題なく動作します。ここで、例 (a) のHEREでわかるように、このアニメーション画像を特定のポリゴン境界内で変換したいと考えています。例 (b) では、現在の結果が表示されていますが、これは機能していません。
