Using clip-border for translating image

Question

I try to find a way, how it's possible to translate a image (showed below) within a given polygon border. When the image is over this border, than I want to cut this part of the image. I tried to use the clip (outdated and doesn't have any polygon shapes) and clip-path (cuts the image itself, not the border within the image should move) command, but until now without any useful results.

For now, the code snippet of my box with all it's contents:

<div id="box">
    <span class="b0"><img src="..."></span>
</div>

I translate the image with an webkit-transform command in css like that:

#box .b0
{
    webkit-transform : animate1 30s 0s infinite;
}

And my animation is given like that:

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

All of this keyframes are modified for the different browser types and they work without any problem. Now I want this animated image to translate within a given polygon border, like you can see HERE in example (a). In example (b) you see the current result, which is not working.

there is a "-" next to webkit missing where u declare #box .b0 - I try to reconstruct your issue. — F. Müller, Jul 20 '15 at 19:59

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Got it working. Seems like firefox does apply overflow: hidden if you have rounded or cut edges but webkit browsers don't.

I found a workaround for your problem - could be a little hacky but it is a solution. You can find the reference here: stackoverflow reference post

Below you find the solution in action:

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

I hope I could provide what you were looking for.

Best regards

Thank you very much, this was **exactly** that I've searched for! (-: P.s. I wrote the code by hand, and I forgot the minus before -webkit. Thank you again for your time that you figured it out! (; — MANiC, Jul 21 '15 at 16:29

Using clip-border for translating image

1 Answers1