![](https://bluepoints.dev/wp-content/uploads/2017/03/Circle-Square-Creative-07-300x300.png)
CSS
CSS3 3Dギャラリー
本日は、CSSの3Dトランスフォームを使って、3Dギャラリーを作ってみましょう! 3Dトランスフォームを使用すれば三次元空間の設定が可能となり、単純な要素でも色々と面白い動きをさせることができます。またCSSトランジッションも併用すれば、3D空間での移動を可能にし、より現実的な効果を産み出すことができます。 今回実現したいメインアイデアは、真ん中に1枚そして両脇に2枚画像があり、それが円形のギャラリー形式に表示されるようにすることです。CSSでperspectiveを使用しているので、画像を回転させると側面の2つの画像は立体的に見えるかと思います。 尚、CSS 3D transformをサポートしているブラウザでないと動作しませんのでお気を付け下さい。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ 今回は以下の様なHTMLコーディングで構築されています。 またこちらがギャラリーを初期化するコードです。 オプション また、以下のようなオプションを加えることも可能です。 お楽しみいただけましたでしょうか?