CSSを使って要素を斜め上から見ているような**Isometric(アイソメトリック)**な見栄えを実装しているデモを、CodePenで公開されている中からいくつか紹介します。 基本的にこのような見栄えを実装したいときによく使われるtransformのrotateX()とrotateZ()を組み合わせたもので、そこに+αを加えて見栄えや動きを作っている感じです。 CSS isometric image hover effects イメージにホバーするとアイソメトリックが解除され、見た目もグレースケールからカラーに変化します。
![CodePenで公開されている、CSSを使ってIsometric(アイソメトリック)な見栄えを実装したデモ 15 | NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2032d72ebcda1928b98d552a9c25edf83b8601d/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F15-css-isometric-appearance-examples-from-codepen-201808.png)