CSSまたはJavascriptの用紙折りたたみの効果

Question

作成してエフェクトを複製しようとしています。ユーザーがdivをクリックすると、折りたたまれている紙のように「開きます」。

どこから始めるべきか、Googleで探すべきことが分からないので、関連する情報へのヘルプやリンクは非常に役立ちます。ここで

は、私は（も紙で展開するハローテキストのために）何をしたいの画像です：

は、事前に

Answer 1

HTML

<div class="parentDiv"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div> 

をあなたのすべてをありがとう

CSS

div.parentDiv { 
    width: 200px; 
    height: 100px; 
} 

div.div1{ 
    width :100px; 
    height: 100px; 
    float:left; 
    background-color: yellow; 
    transform: skew(0deg,20deg); 
} 
div.div2{ 
    width :100px; 
    height: 100px; 
    float:left; 
    background-color: yellow; 
    transform: skew(0deg,-20deg); 
} 

親divの中に絶対位置と中央揃えのテキスト "HELLO"を配置することができます。