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;
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
