![](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e87945a63b8b3ba5647095d226d848e20ca0ab5/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2016%2F1507_css3-animation.png)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
第10回 画像を3次元で水平に回すアニメーション | gihyo.jp
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
第10回 画像を3次元で水平に回すアニメーション | gihyo.jp
今回のお題は、5つの画像で五角柱を組み立てて、水平に回してみよう(サンプル1)。五角柱にマウスポ... 今回のお題は、5つの画像で五角柱を組み立てて、水平に回してみよう(サンプル1)。五角柱にマウスポインタを重ねれば、回転は止まる。ずっと回し続けるために、アニメーションにはanimationプロパティを使った。といっても、設定そのものはさほどむずかしくない。考え方さえわかれば、3次元のアニメーションは「こけおどし」にはもってこいといえる。 サンプル1 CSS3: Photos on a rotating polygon in 3D space 五角柱をつくる計算 今回の表現は、「Photos on a rotating polygon」を採り入れた。もちろん、コードはわかりやすいように大幅に書き替えてある。画像を回す前に、まず五角柱を組み立てなければならない。そのために使うのは、座標変換のtransformプロパティだ。関数rotateY()とtranslateZ()で、5つの画像を順