Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=

[ifttt]

"記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。" そんなことで泣くなよ！

[tyru]

CSS で 3D。transform-style: preserve-3d

[sh19910711]

"transform-style: preserve-3d"

[tasukenosuke]

これは楽しそう。後で真似してみたい。

[qinmu]

JavaScript。

[kazuph1986]

よさ。

[t_f_m]

あとで

[Nao_Y]

すごい。涼しげでこの時期にぴったり。

[wwolf]

こんなんできるのか、すごい。自分でもカスタマイズしてみたくなるな

[hdampty7]

置物がなくて寂しすぎる。自分なら置物ができるまではリリースできそうもないな。

[programmablekinoko]

知見

[pekee-nuee-nuee]

かわいい

[mricopp]

かわいい

[dorokei]

すべて3DのWebサイトあったら面白いなと思ってたけどできそうだな。

[psfactory]

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

[hatecafe]

すぎょい。

[KoshianX]

へえ、CSS でこんなことできるのか。

[aTn]

うひゃ～ビックリ。Vue.jsでこんな凄い事できるんだ。お魚さんはニモとドリーだと最高かも。

[tokuniimihanai]

すごい　まだまだ知らないCSSがあるなあ