css - CSS3 円弧に沿って移動する

Question

現在の CSS3 でオブジェクト (具体的には DIV) を円弧または曲線に沿って移動することはまったく可能ですか? 説明に役立つ画像を次に示します。

Answer 1

ネストされた要素を使用して、ラッパーと内部要素を反対方向に回転させて、内部要素の回転がラッパーの回転を補正するようにすることができます。

ネストされた要素を水平に保つ必要がない場合は、内側の回転を省略できます。

これがダブレットです。スタック スニペット:

/* 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/

Answer 2

はい、そのアニメーションは、transform-origin CSS3プロパティを使用して作成し、回転ポイントを右端に設定して、そのように移動することができます。

それをチェックしてください：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>

Answer 3

変換の起点を移動する代わりに、x 変換が外側のコンテナーに適用され、適切なイージング カーブを含む y 変換が内側のコンテナーに適用される、二重にネストされた要素を使用することもできます。