当前的 CSS3 是否有可能沿弧线或曲线平移对象(特别是 DIV)?这是帮助说明的图像。
问问题
24433 次
3 回答
33
您可以使用嵌套元素并使包装器和内部元素以相反的方向旋转,以便内部元素的旋转补偿包装器的旋转。
如果不需要保持嵌套元素水平,可以省略内部旋转。
这是一个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 以仅使用一个元素的方式写了一篇关于此问题的文章:http: //lea.verou.me/2012/02/moving-an-element-along-a-circle/
于 2012-01-15T13:48:17.547 回答
13
是的,可以使用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>
于 2012-01-06T18:58:11.750 回答
4
移动变换原点的另一种方法是使用双嵌套元素,其中将 x 变换应用于外部容器,并将具有适当缓动曲线的 y 变换应用于内部容器。
于 2012-01-06T19:03:16.797 回答