現在のCSS3では、オブジェクト(具体的にはDIV)を円弧または曲線に沿って移動することはまったく可能ですか?これは説明に役立つ画像です。
ネストされた要素を使用して、ラッパーと内部要素を反対方向に回転させると、内部要素の回転がラッパーの回転を補正します。
ネストされた要素を水平に保つ必要がない場合は、内側の回転を省略できます。
これが Dabblet です。スタックスニペット:
/* Arc movement */
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-Origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: Lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
<div class="wrapper">
<div class="inner">Hover me</div>
</div>
また、Lea Verouはこの問題について、1つの要素のみを使用する方法で記事を書きました: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
はい、そのアニメーションは、transform-OriginCSS3プロパティを使用して右端に回転ポイントを設定し、そのように移動できるように作成できます。
それをチェックしてください: http://jsfiddle.net/Q9nGn/4/(マウスを上に置く)
#c {
border: 1px solid black;
height: 400px;
}
#c:hover #m {
-webkit-transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transform: rotate(180deg);
-moz-transition: all 1s ease-in-out;
-o-transform: rotate(180deg);
-o-transition: all 1s ease-in-out;
-ms-transform: rotate(180deg);
-ms-transition: all 1s ease-in-out;
transform: rotate(180deg);
transition: all 1s ease-in-out;
}
#m {
width: 60px;
height: 60px;
position: absolute;
background: green;
border-radius: 30px;
top: 270px;
left: 20px;
-webkit-transform-Origin:300px 30px;
-moz-transform-Origin:300px 30px;
-o-transform-Origin:300px 30px;
-ms-transform-Origin:300px 30px;
transform-Origin:300px 30px;
}
<div id="c">
<div id="m"></div>
</div>
変換原点を移動する代わりに、x変換が外部コンテナーに適用され、適切なイージングカーブを持つy変換が内部コンテナーに適用される、二重のネストされた要素を使用することです。