旋转粘糊糊的菜单

Question

我在 codepen 上找到了这个很棒的菜单。现在我想使用它，但我的问题是我想将它右对齐放置在我的网站上。不幸的是这个菜单下降也对。但我希望它向左下降。那么我该如何解决这个问题。（改开角度没用？）感谢您的帮助。

$opening-angle:$pi*2;

Answer 1

在 .menu-open:checked~.menu-item 选择器

处更改 transform 属性

从 transform:translate3d(110px*$i,0,0); 到 transform:translate3d(-110px*$i,0,0);

并在.menuclass

中将left属性更改为right

已更新.menu

.menu{
  @extend %goo;
  $width:650px;
  $height:150px;
  position:absolute;
  right:50%; /*Changed*/
  margin-left:-80px;
  padding-top:20px;
  padding-left:80px;
  width:$width;
  height:$height;
  box-sizing:border-box;
  font-size:20px;
  text-align:right; /*Changed*/
}

Codepen

旋转粘糊糊的菜单

Rotate Gooey Menu

css

sass

twitter-bootstrap-3

codepen