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转换应用于内部容器。

  • hover时创build一个CSS“path”
  • 删除IE上的select箭头
  • z-index通过设置变换(旋转)来取消
  • Flexbox - 两个固定宽度的柱子,一个灵活
  • 什么是这个CSSselect器?
  • 具有渐变的CSS3animation
  • 如何使Twitter引导模式全屏
  • 透明文本剪出背景
  • 除了一边创build一个CSS3盒子阴影
  • 'transform3d'不能与位置:固定的孩子
  • 在CSS FlexBox布局中自动调整图像大小并保持纵横比?