CSS Transitionsを使った3Dロールオーバーのアイデア (2/2)
STEP 3：動きをつけてみる STEP 2で立方体が完成したので、マウスオーバーによって立方体が回転するように、動きを付けてみよう。 立方体の回転は、.cubeに対してtransform-style: preserve-3d;を指定し、子要素を3Dで描画するように設定してから、transitionプロパティでアニメーションの種類と時間を指定している。 マウスオーバー（.stage:hover .cube）のスタイルには、横方向へ回転させる場合は、Y軸を基準にするためtransform: rotateY(360deg);を指定する。縦方向へ回転させる場合は、X軸を基準にするためtransform: rotateX(-360deg);を指定する。 ■横回転のソースコード（CSS） .stage{ -webkit-perspective: 400; -ms-perspective: 400;
ソニー、3Dメガネ不要で360度立体表示が可能なディスプレイ「RayModeler」を開発
ソニーが360度の立体映像を表示することが可能なディスプレイ「RayModeler」を開発しました。 あたかも目の前に実物があるかのような立体映像を楽しむことができるほか、現在各社が発売している3Dテレビとは違って3Dメガネが不要となっており、あらゆる分野への応用が期待されています。 詳細は以下から。 ソニーが公開した360度立体ディスプレイ「RayModeler」の解説ムービー。 YouTube - RayModeler: 360-degree Autostereoscopic Display (360°立体ディスプレイ) SIGGRAPH 2010 まずは特徴紹介。 全周囲に立体映像を表示するディスプレイは未来の技術かと思われていましたが、ソニーはその技術を実現する360度立体ディスプレイを開発したそうです。 あたかも本物が実在するような、リアルな立体映像。 LEDが全周囲に立体映像を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
