CSS3变换切断形状答案

【问题标题】：CSS3 Transform cutting off shapeCSS3变换切断形状
【发布时间】：2016-05-14 20:33:31
【问题描述】：

我有一个 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); }
}

谢谢 - 我真的很感激！

【问题讨论】：

标签： css animation svg transform

【解决方案1】：

您应该转换保存 svg 的 div：

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

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

【讨论】：