CSS3转换切断形状

Question

我有一个SVG矩形，我试图动画移动垂直无限，使它看起来像它是浮动。 当矩形向下时，底部看起来被切断并变得更薄，我似乎无法弄清楚如何使它完整的SVG形状在移动时仍然存在。

这里是我的JSFiddle

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 828 828" style="enable-background:new 0 0 828 828;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:none;stroke:#000000;stroke-width:50;stroke-miterlimit:10;} 
</style> 
    <rect id="box" x="26.9" y="26.1" class="st0" width="777.4" height="777.4"/> 
</svg> 
</div> 

CSS：

.wrapper { 
    width:50%; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    margin:0 auto; 
    padding-top:5%; 
    } 

    #box { 
    transform-origin:center; 
    -webkit-animation-name: box; 
    -webkit-animation-duration: 15s; 
    -webkit-transform-origin:center; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-direction:alternate; 
    animation-direction:alternate; 
} 

@-webkit-keyframes box { 
    0% { -webkit-transform: translate(0px, 20px); } 
    10% { -webkit-transform: translate(0px, -5px); } 
    20% { -webkit-transform: translate(0px, 20px); } 
    30% { -webkit-transform: translate(0px, -5px); } 
    40% { -webkit-transform: translate(0px, 20px); } 
    50% { -webkit-transform: translate(0px, -5px); } 
    60% { -webkit-transform: translate(0px, 20px); } 
    70% { -webkit-transform: translate(0px, -5px); } 
    80% { -webkit-transform: translate(0px, 20px); } 
    90% { -webkit-transform: translate(0px, -5px); } 
    100% { -webkit-transform: translate(0px, 20px); } 
} 

谢谢你 - 我真的很感激！

Answer 1

你应该变换持有SVG股利：

<div id='box'> <!-- transform this guy --> 
    <svg> 
    </svg> 
</div> 

https://jsfiddle.net/foreyez/kxb52cjz/