使用 clip-border 翻译图像

Question

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

现在，我的盒子的代码片段及其所有内容：

<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.

我找到了解决您的问题的方法 - 可能有点老套，但它是一个解决方案。您可以在此处找到参考资料：Whosebug 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>

我希望我能提供你正在寻找的东西。

此致

使用 clip-border 翻译图像

Using clip-border for translating image

html

css

animation

clip-path