ブラウザで見ることができる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=
![Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit](https://cdn-ak-scissors.b.st-hatena.com/image/square/39a1d7282ee9255bd28d8007b2aa48e0e2b63566/height=288;version=1;width=512/https%3A%2F%2Fcrieit.now.sh%2Fupload_images%2F0dd6dfb5be148e18cf69c9c184c4568e5b48b41c0a3fe.png)