CSS3翻译弧

当前的CSS3是否可以将一个对象(特别是DIV)沿弧线或曲线转换? 这是一个图像来帮助说明。 在这里输入图像说明

3 Solutions collect form web for “CSS3翻译弧”

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

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

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

是的,可以使用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> 

移动转换原点的另一种方法是使用双重嵌套元素,其中将x转换应用于外部容器,并将具有适当宽松曲线的y转换应用于内部容器。

  • 如何添加一个工具提示到一个div
  • CSS3animation和显示无
  • 有没有办法把列表分成列?
  • 作为背景图像时,修改SVG填充颜色
  • 具有绝对/固定儿童的父容器上的自动高度
  • 如果select器不匹配,如何运行CSS3animation到最后?
  • CSS3单向过渡?
  • 上次保证金/填充折叠在flexbox中
  • 如何增加虚线边框点之间的空间
  • IE8边界半径
  • 移动浏览器中的CSS3 100vh不恒定