html - SVG折叠信封

我在玩弄SVG和它的工作原理。我正在尝试设置这个SVG的动画，信封关闭并向右飞，然后出现一个复选标记。
到目前为止，我已经完成了信封SVG，我已经设法让顶部向下翻转，但它在信封上方，我需要它来关闭信封。它也在向错误的方向翻转。。
我该怎么解决？

<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 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
	.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st3{
		transform-origin:55% 50%;
		-moz-transform-origin:55% 50%;
		animation: flipX 1.6s forwards;
	}

	@-webkit-keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
@keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
.flipX{
  opacity:0;
  -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
	animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
	<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
	<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>
	<g id="Layer_3">
		<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 		"/>
		<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 		"/>
	</g>
</g>
</svg>

最佳答案

如果你不想有东西在旋转过程中移动，把它放在原点。
在这种情况下，一个快速的解决方法是更改flap元素的坐标，使长边的y坐标为零，然后使用transform属性将元素包装在<g>元素中，以将其放置在应该放置的位置。
也不要使用transform-origin样式。
这很管用，但可以清理很多：

<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 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
	.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st3{
		animation: flipX 1.6s forwards;
	}

	@-webkit-keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
@keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
.flipX{
  opacity:0;
  -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
	animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g>
	<rect class="st0" width="805" height="314"/>
</g>
<g>
	<rect x="55" y="129" class="st1" width="192" height="98"/>
	<g>
		<polyline class="st2" points="55,129 151,178 247,129 "/>
		<g transform="translate(0 129)">
			<polyline class="st3" points="55,0 151,-65 247,0 "/>
		</g>
	</g>
</g>
</svg>

关于html - SVG折叠信封，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44835891/