CSS3翻译弧

当前的CSS3是否可以将一个对象（特别是DIV）沿弧线或曲线转换？ 这是一个图像来帮助说明。

Answer 1

您可以使用嵌套元素，并使包装和内部元素旋转方向相反，以便内部元素的旋转补偿包装的旋转。

如果不需要保持嵌套元素水平，则可以省略内部旋转。

这是一个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> 

Answer 2

是的，可以使用transform-origin CSS3属性创buildanimation，以便将旋转点设置在最右侧，以便像那样移动。

检查出来： 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转换应用于内部容器。