BLOG

コーディング習慣

おはようございます。

最近朝の気温が下がってきて眠気と毎回格闘してますどうもハヤトワンです。

(今日は特に眠い)

さて、僕は実は先月くらいからいろんなWebサイトのデザインパターンや表現を知るために、毎日3個ずつ、良いと思ったWebサイトをスプレッドシートにストックしているというのをやっています。

ちゃんとジャンルや特徴、アニメーションがどういう感じなのかっていうのも添えてストックしています。

で、それをしばらく続けて思ったのは、

確かにこういった表現ができるとか、後々案件があったときにこういう分野、ジャンルのサイトはこういうデザインがいいかもなという参考にはなるのですが、

実際に自分のコーディングスキルが上がっているかと言われると、そこまで影響しない。(いい表現やアニメーションみてどうやって実装してるんだろって調べることがあるくらい)

なので、もっとコーディングスキルを上げる為に、先週末から新たにYou Tubeの良いと思った作品のライブコーディングの動画を見て、自分なりに軽くアレンジを加えてそれをGitHubにプッシュするといった習慣も始めました。

今日でまだ始めて5日目ですが、チリツモで表現の幅が広がるだろうし、何より、コーディングをもっと息を吐くように書けるようになる為の筋トレだと思ってやっていきます。

例えばこんな感じ。

https://github.com/HayatoMoromasa/sample/tree/main/3dImageHoverEffect

(てか今すっげえねみいから全然タイピングがまわらない。。笑)

ということで今日はこれに使用されている

transform-style: preserve-3d;

perspective

についてサクッと解説。

transform-style: preserve-3d;

は、これを指定することで3D空間に配置されるようになります。

それの3D空間の奥行きを「perspective: 500px」を使って調整する。

みたいな感じです。

perspectiveはtransformの奥行きを指定って感じで覚えておけばいいですね。

ちなみにperspectiveは視点っていう意味だから、transformで指定したものから500px引いた距離っていう感覚ですかね。

という感じで、今日も今からコーディング。

眠い目こすって楽しみます(-_-)>

それでは今日も良い1日を!