使用剪辑边框翻译图像

Question

我试图找到一种方法，如何在给定的多边形边界内转换图像（如下所示）。当图像超过此边界时，我想剪切图像的这一部分。我尝试使用剪辑（过时且没有任何多边形形状）和剪辑路径（剪切图像本身，而不是图像内的边框应该移动）命令，但直到现在没有任何有用的结果。

现在，我的盒子的代码 sn-p 及其所有内容：

<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) 中，您会看到当前的结果，但它不起作用。

Answer 1

搞定了。似乎firefox 确实适用于overflow: hidden，如果你有圆形或切割边缘但webkit browsers don't。

我找到了解决您的问题的方法 - 可能有点笨拙，但它是一个解决方案。你可以在这里找到参考：stackoverflow reference post

您可以在下面找到解决方案：

@-webkit-keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

@-moz-keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

@keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

#box {
    background-color: tomato;
    width: 300px;
    margin-left: 50px;
    border-top: 10px red;
    border-right: 10px blue;
    overflow: hidden;
    -moz-border-radius: 50%;
    -webkot-border-radius: 50%;
    border-radius: 50%;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box .b0 {
    display: inline-block;
    border: 1px dashed black;
    -webkit-animation: animate 2s infinite;
    -moz-animation: animate 2s infinite;
    animation: animate 2s infinite;
}

<div id="box">
    <span class="b0"><img src="http://png-5.findicons.com/files/icons/547/sport/128/tennis_ball.png"/></span>
</div>

我希望我能提供你想要的东西。

最好的问候