SVG摺疊信封

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

 
\t @-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; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g id="Layer_1"> 
 
\t <rect id="XMLID_42_" class="st0" width="805" height="314"/> 
 
</g> 
 
<g id="Layer_2"> 
 
\t <rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/> 
 
\t <g id="Layer_3"> 
 
\t \t <polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 \t \t "/> 
 
\t \t <polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 \t \t "/> 
 
\t </g> 
 
</g> 
 
</svg>

來源

2017-06-29 Chris Marsland

如果你不想要的東西旋轉過程中移動，把它放在原點。

這種情況下的一個快速修復方法是更改襟翼元素的座標，以便長邊的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" 
 
\t viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{ 
 
\t \t animation: flipX 1.6s forwards; 
 
\t } 
 

 
\t @-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; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g> 
 
\t <rect class="st0" width="805" height="314"/> 
 
</g> 
 
<g> 
 
\t <rect x="55" y="129" class="st1" width="192" height="98"/> 
 
\t <g> 
 
\t \t <polyline class="st2" points="55,129 151,178 247,129 "/> 
 
\t \t <g transform="translate(0 129)"> 
 
\t \t \t <polyline class="st3" points="55,0 151,-65 247,0 "/> 
 
\t \t </g> 
 
\t </g> 
 
</g> 
 
</svg>

來源

2017-06-29 23:12:07

這是完美的，就是我之後的事情。非常感謝你：） –

如果添加translateY(-65px)到100%關鍵幀，它會將信封開口向下，因爲它的翻轉它。 65px是一個眼球的人物。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{ 
 
\t \t transform-origin:55% 50%; 
 
\t \t -moz-transform-origin:55% 50%; 
 
\t \t animation: flipX 1.6s forwards; 
 
\t } 
 

 
\t @-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) translateY(-65px); 
 
    } 
 
} 
 
@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) translateY(-65px); 
 
    } 
 
} 
 
.flipX{ 
 
    opacity:0; 
 
    -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g id="Layer_1"> 
 
\t <rect id="XMLID_42_" class="st0" width="805" height="314"/> 
 
</g> 
 
<g id="Layer_2"> 
 
\t <rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/> 
 

 
\t <g id="Layer_3"> 
 
\t \t <polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 \t \t "/> 
 
\t \t <polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 \t \t "/> 
 
\t </g> 
 

 
</svg>

來源

2017-06-29 22:32:24 amphetamachine

哦，你巨星。這已被竊聽我小時.. –

反正是有保留的底部那個三角形固定在信封上的過渡？ –

回答

相關問題