【CSS】簡単な要素の奥行回転アニメーションサンプル
CSSで要素の奥行回転アニメーションを実装します
回転させる要素、今回は簡単な円をCSSで描きます
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 2px red;
}
マウスホバー時に実行するあニメーションを設定して、アニメーション時間をtransitionで指定します、単位はs(秒)です
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 2px red;
transition: 10s;
-webkit-transition: 10s;
}
.circle2:hover{
transform: rotateY(7200deg);
-webkit-transform: rotateY(7200deg);
}
rotateYでY軸での横回転になり、rotateXでX軸での縦回転になります
他の要素を変更したり追加して遊びます
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 2px red;
transition: 10s;
-webkit-transition: 10s;
}
.circle:hover{
border: solid 2px red;
transform: rotateY(7200deg);
-webkit-transform: rotateY(7200deg);
}
要素の奥行回転アニメーションサンプル
https://samples.repop.jp/css-animation/depth-animation.html
※こちらではマウスホバーではなくクリック(タップ)時のアクションとしてあります
See the Pen Element Depth Rotation CSS Animation by yochans (@yochans) on CodePen.
ディスカッション
コメント一覧
まだ、コメントがありません