本日は、CSSの3Dトランスフォームを使って、3Dギャラリーを作ってみましょう!

3Dトランスフォームを使用すれば三次元空間の設定が可能となり、単純な要素でも色々と面白い動きをさせることができます。またCSSトランジッションも併用すれば、3D空間での移動を可能にし、より現実的な効果を産み出すことができます。

今回実現したいメインアイデアは、真ん中に1枚そして両脇に2枚画像があり、それが円形のギャラリー形式に表示されるようにすることです。CSSでperspectiveを使用しているので、画像を回転させると側面の2つの画像は立体的に見えるかと思います。

尚、CSS 3D transformをサポートしているブラウザでないと動作しませんのでお気を付け下さい。

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

HTMLマークアップ

今回は以下の様なHTMLコーディングで構築されています。

<section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
        <a href="#">
            <img src="images/1.jpg" alt="image01">
            <div>http://www.colazionedamichy.it/</div>
        </a>
        <a href="#">
            <!-- ... -->
        </a>
        <!-- ... -->
    </div>
    <nav>
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>

またこちらがギャラリーを初期化するコードです。

$('#dg-container').gallery();

オプション

また、以下のようなオプションを加えることも可能です。

current     : 0,
// index of current item
autoplay    : false,
// slideshow on / off
interval    : 2000
// time between transitions

お楽しみいただけましたでしょうか?

Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@unilance.co.jp
Tel: 03 5830 7277

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

  • Stories
  • Community
  • Blog
  • Careers
  • Brand Assets

Downloads

  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...

© All rights reserved

Made with ❤ in Sugito, Saitama, Japan