CodePenで公開されている、CSSを使ってIsometric(アイソメトリック)な見栄えを実装したデモ 15

Tips

CodePenで公開されている、CSSを使ってIsometric(アイソメトリック)な見栄えを実装したデモ 15

CSSを使って要素を斜め上から見ているようなIsometric(アイソメトリック)な見栄えを実装しているデモをCodePenで公開されているものから紹介します。
基本的にこのような見栄えを実装したいときによく使われるtransformrotateX()rotateZ()を組み合わせたもので、そこに+αを加えて見栄えや動きを作っている感じです。

※スマートフォンやタブレットでも確認ができないというわけではないですが、動作確認などはPC環境での閲覧推奨です。

CSS isometric image hover effects

イメージにホバーするとアイソメトリックが解除され、見た目もグレースケールからカラーに変化します。

See the Pen CSS 3D image hover effects by Naoya (@nxworld) on CodePen.

The handbook download animation

See the Pen The handbook download animation by Yancy Min (@yancy) on CodePen.

Isometric Layout With CSS 3D Transforms

ホバーで浮き上がるエフェクトがついたカードが並べられています。

Isometric Grid

See the Pen Isometric Grid by Donny Burnside (@donnyburnside) on CodePen.

Isometric Card Grid

パッと見は上の2つとそこまで変わらない見栄えですが、重なっている状態のカードが並べられている感じ(ホバーするとわかりやすいです)のものです。
また、JavaScriptを使うことにはなりますが、スクロールしたときの動きにも注目です。

See the Pen Isometric Card Grid by Jon Kantner (@jkantner) on CodePen.

Tariff Cards

See the Pen Tariff Cards by Andreas Storm (@andreasstorm) on CodePen.

hovering cards

See the Pen hovering cards by karim jawhar (@kjawhar15) on CodePen.

Isometric Cards - Pure CSS

See the Pen Isometric Cards - Pure CSS by Daniel Snows (@daniel-snows) on CodePen.

CSS Space Bridge feat. 3 divs

See the Pen CSS Space Bridge feat. 3 divs by Piotr Galor (@pgalor) on CodePen.

Isometric hover effect

要素がふわふわと浮かんでいる見栄えを実装したもので、影にもしっかり変化をつけています。

See the Pen Isometric hover effect by Tobias Reich (@electerious) on CodePen.

Material sheet isometric animation

See the Pen Material sheet isometric animation by Nathaniel Watson (@nw) on CodePen.

Isometric Menu Concept

ホバー時とクリック時の見栄えも実装されています。

See the Pen Isometric Menu Concept by Jack Doyle (@jack-doyle) on CodePen.

isometric menu

同じくアイソメトリックな見栄えのメニューボタンで、クリック時の動きの実装にはJavaScriptを使用しています。

See the Pen isometric menu by Clément Roche (@ClementRoche) on CodePen.

CSS3 Isometric Text Effect created by Duncan Midwinter.

テキストに適用したもので、影も上手く表現されています。

CSS Full Page Isometric Background

最後はアイソメトリックな背景をlinear-gradient()と組み合わせて表現しています。

See the Pen CSS Full Page Isometric Background by pivotal-plech (@pivotal-plech) on CodePen.

Posted on

Category : Tips

Close the search window,
please press close button or esc key.