Tangram_html/css_WEB-ITnose を作成するための純粋な CSS3

最近、自分のプロジェクトでジグソーパズルを作らなければならなかったのですが、あることが頭に浮かびました。 。 。ジグソーパズルは子供の頃に遊んだものではありませんか？ 。 。

ジグソーパズルの起源

まずはポピュラーサイエンスをやってみよう 情報を調べていた時に拝見しました。

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

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

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

ナニ、タングラムは中国出身であることが判明しました。 。 。

提案

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

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

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

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

絵を使ってボードを作ろうと思い始めたのですが、前回の記事のおかげでCSS3を使った20種類のグラフィックの作り方をまとめた「CSSコードで色々な形のグラフィックを書く方法」という記事を書きました。興味のある学生は、ニーズを満たす 7 つのボード形状を見て確認してください。

属性を使用する

変換

翻訳

技術的な検証

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

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

コーディング実装

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

<div class="wrap">    <div class="t t1 t11"></div>    <div class="t t2 t22"></div>    <div class="t t3 t33"></div>    <div class="t t4 t44"></div>    <div class="t t5 t55"></div>    <div class="t t6 t66"></div>    <div class="t t7 t77"></div></div>

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

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

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

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

DEMO

さて、タングラムがついに完成しました。エフェクトを見てみましょう。

jsfiddle コードを残してください。ブログガーデンは控除できません。リンクを残すことのみできます http://jsfiddle.net/yanhaijing/3tf8ac6q/1/

改善

それだけですか、もちろんそうではありません、ありますここでの CSS はすべてハードコードされており、柔軟性に欠けています。LESS を使用する場合 (less は変数と数学的演算をサポートしています)、基本的な長さの変数を設定できます。このように、この変数を変更するだけで、タングラム全体のサイズを簡単に変更できます (実際にこれを実行しましたが、jsfiddle はサポートしていません)。という構文をCSSバージョンで書きました）。

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

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

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

参考資料

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

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