お題は「テンプレート」です。Tの作品【オムライズしりとり】たい焼きにも「天然もの」「養殖もの」があるんだそうです。1匹ずつ焼くタイプの型で作ったのが天然もの。複数同時に焼けるタイプの型で作ったのが養殖もの。どっちでもいいけどカスタードクリームのたい焼きが好きです。...
テンプレートの「と」→
お題は、トリックです。
作品「トリック」
K
お疲れ様です！Kです。
作品の解説
トリックといえば、錯覚で2次元が3次元に見えたりするイメージ。
っということで今回は、写真でもなくイラストでもなく、HTMLとCSSで2次元を3次元にしてみました。
10年程前は手打ちでコードを入れていましたが、ここ数年は、ググってコピペするだけで下記のようなものは出来てしまいます。なので、オリジナル作品ではないです。こんな表現もあるんだ！って感じで見てくださいませ〜。
まずは円をつくろう！
円を描いてグラデーションをのせると、あら不思議！なんとなく立体感がでましたね。ねっ？
（スマホの人は「Result」ってボタン押すとプレビューされます）
Y軸をクルクルしちゃおう！
さっきの円をY軸（縦）を軸に回転させます。
まだ球体には見えんな〜
Z軸も移動しちゃお！
大きく円を描く軌道で、手前から奥へクルクルします。
周回軌道を打ち消すために、もういっちょY軸回転させるぞよ！
ここがメインらしいぞ！
回転を打ち消すために（円が常に正面を向くように）旋回とは逆方向にクルクルさせます。
ついにX軸をいじる！
斜め上からのアングル（目線）感を出すために傾ける。
（解説メンドイ…から省く！許せ！）
リアリティ感を出すべし！
影つけたり、背景にもグラデーションつけたり、リアリティ感を出します。
んで、円を増やす！
円を増やして、それぞれディレイさせる。
ドヤっ！！
HTMLとCSSで2次元『円』が、3次元『球体』になりましたね。
HTMLで構造、CSSでデザイン。
ホームページもこんな感じで構築されてたりします。
いろんな表現方法がありますね。
以上です！
次のお題は..
では、「トリック」の「く」だから…
次のお題は、
空気
K
では、Aさん「空気」で作品やでぇ〜
A
考案中..
