ジグソーパズルを作成するための純粋な CSS3

ジグソーパズルの起源

まずポピュラーサイエンスをやってみよう 情報を調べていたときに見ました。とても興味深いと思いました。

宋の時代に、幾何学図形に精通した黄伯司という人がいて、とてももてなしの精神を持ち、6つの小さなテーブルからなる「宴会テーブル」、つまり客をもてなすための小さなテーブルを発明しました。その後、誰かが改良して7卓の宴会テーブルとなり、3人で三角形、4人で四角形、6人で六角形など、食べる人数に応じて様々な形に組み立てることができます。 .. …これにより、誰にとっても便利な食事が可能になり、より良い雰囲気が生まれます。その後、宴会のテーブルを 7 枚の板に減らし、パズルに使用したり、おもちゃに進化した人もいます。

とても賢くて楽しいので、人々はそれを「タングラム」と呼んでいます。

今では世界中でタングラムを知らない人はほとんどいませんが、海外では「タングラム」と呼ばれ、中国から伝わったパズルを意味します（唐の時代に発明された図形ではありません）。

ナニ、タングラムは中国出身だったことが分かりました。 。 。

計画

興味深い内容を読んだ後は、どのようなテクノロジーを使用するかに関係なく、ジグソーパズルを作成するという仕事に取り掛かります。 。 。 (フロントエンドページ内)

私自身の知識体系と組み合わせて、一般的なアイデアを考えました:

1. Canvas、万能の Cavans は間違いなく問題を解決できます。それに、私は以前に Painter を使用したことがあります。柔軟性と拡張性を両立。
2. CSS3、各バージョンは dom 要素であり、css3 を使用して完成させます。柔軟性と拡張性はキャンバスほど良くありません。
3. svg、これは可能なはずですが、この分野の知識が不足しています。
4. 。 。 。まだ分​​かりません。

時間コスト（厳しすぎる）などを考慮して。 。 。このため、css3 ソリューションを使用することにしました。

絵を使ってボードを作ろうと考え始めたのですが、前回の記事のおかげでCSS3を使って20種類の図形を作成する方法をまとめた「CSSコードでいろいろな形の図形を書く方法」という記事を書きました。ご興味のある方は、ニーズを満たす 7 種類のボード形状をご覧ください。

使用される属性

• 変身
• 翻訳

技術検証

開始する前に、使用する CSS3 が必要なプラットフォームと互換性があるかどうかを http://caniuse.com/ で確認する必要があります。

モバイル端末で動作させたいので、使用するcss3属性を確認しました。Android 2.3以降でサポートされていますが、プレフィックスを付ける必要があるため、安心して使用できます。

コーディング実装

まず、7 つのボードを表すコンテナと要素が必要です。

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t1 t11"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t2 t22"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t3 t33"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t4 t44"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t5 t55"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t6 t66"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t7 t77"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

実際、私たちが使用する図形には、三角形、四角形、平行四辺形の 3 種類があります。これについては、上記の記事ですべて説明されていますが、これらのボード間には一定のサイズ関係があるということは、少しの数学的知識だけで解決できます。

この時点では、ボードの表現はもう問題ではありません。次に、見栄えの良いグラフィックを形成するためにボードを指定された位置に移動する必要があります。これはすべて CSS3 の変換によって行われます。平行移動、拡大縮小、回転、変形などのさまざまな操作を実現できます。

ここではwapの位置を相対に設定します。すべてのボードは絶対的です。そして、初期化中にすべてのボードが左上隅に配置されるように、top と left を 0 に設定し、配置中に適切な計算を実現するためにボードの変換原点を左上隅に設定します。以下のコードです。 CSS部分。

<span style="color: #800000;">.wrap</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;
}<span style="color: #800000;">
.t</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    transform-origin</span>:<span style="color: #0000ff;">0 0</span>;
}<span style="color: #800000;">
.t1</span>{<span style="color: #ff0000;">
    
    border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid red</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(-135deg)</span>;
}<span style="color: #800000;">
.t2</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid #fdaf17</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(135deg)</span>;
}<span style="color: #800000;">
.t3</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #c3d946</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(45deg)</span>;
}<span style="color: #800000;">
.t4</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #00bdd0</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(-45deg)</span>;
}<span style="color: #800000;">
.t5</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #5dbe79</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(75px,225px) rotate(45deg)</span>;
}<span style="color: #800000;">
.t6</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(300px) rotate(90deg) skew(45deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ffdd01</span>;
}<span style="color: #800000;">
.t7</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 150px solid #0177bf</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 150px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(300px,300px) rotate(180deg)</span>;
}

デモ

さて、ジグソーパズルが完成しました。エフェクトを見てみましょう。

jsfiddle コードを残してください。ブログにお金を支払う義務はありません。http://jsfiddle.net/yanhaijing/3tf8ac6q/1/ のみを残してください。

改善

もちろんそれだけではありません。ここでの CSS はすべてハードコーディングされており、柔軟性が低すぎるため、基本的なものを設定できます。このようにして、この変数を変更する限り、タングラム全体のサイズを簡単に変更できます。 (実際、私はそうしましたが、jsfiddle はこれより少ない構文をサポートしていないため、CSS バージョンを作成しました)。

実際、CSS3 を通じてさまざまなグラフィックを変更することもできます。タングラムでは何千ものグラフィックを作成できると言われています。 。 。頭を使って素早く作成してください。完了したら、ブロガーへのリンクを忘れずに残してください。

さらに改良されたのは、CSS3 トランジションを通じてアニメーションを作成することです。キーフレームを使用すると、タングラム変形の複雑なアニメーションを作成でき、その効果は美しいです。

ここでは写真のみを投稿します。コードは提供されません。 。 。

参考資料

• CSS3アニメーションの詳しい解説(http://beiyuu.com/css3-animation/)

Tencent アニメーション マニュアル (http://ecd.tencent.com/css3/guide.html)