Question

我正在寻找的效果是：

This就是我现在所拥有的。我认为问题在于元素在旋转后会定位并保持这些位置，因此不能靠近。

页面布局是一个简单的列表。

<body>
<div id="navmenu">
    <ul>
        <li>
        <a href="#">page one</a>
        </li>
        <li>
        <a href="#">page two</a>
        </li>
        <li>
        <a href="#">a longer page three</a>
        </li>
        <li>
        <a href="#">another page</a>
        </li>
    </ul>
</div>
</body>

Answer 1

一种解决方案是使用否定margin并将最后li元素移到右侧，如：

＆＃13;

#navmenu {
  margin: 0;
  padding: 0px;
  padding-top: 0px;
  text-align: center;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
#navmenu ul {
  list-style: none;
  float: right;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  padding-right: 100px;
  /* font-size: 0; */
}
#navmenu ul li {
  display: inline;
  float: left;
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
  margin-left: -106px;
}
#navmenu ul a {
  background-color: #FFFFFF;
  border: 2px solid;
  border-radius: 25px;
  display: inline;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
  padding-right: 100px;
  text-decoration: none;
  text-align: center;
  transition-duration: 0.5s;
  transition-property: transform;
}
#navmenu ul a:hover {
  transform: translate(-50px, 0px);
}
#navmenu ul a:active {
  position: relative;
  top: 3px;
}
#navmenu ul li:last-of-type {
  position: relative;
  right: 64px;
}

＆＃13;

<div id="navmenu">
  <ul>
    <li><a href="#">page one</a>
    </li>
    <li><a href="#">page two</a>
    </li>
    <li><a href="#">a longer page three</a>
    </li>
    <li><a href="#">another page</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

如果您阅读http://dev.w3.org/csswg/css-transforms/#transform-rendering，则说明

注意：转换会影响可视化呈现，但除了影响溢出之外，对CSS布局没有影响。

您必须手动分隔它们（如果旋转和元素大小等未修复，或使用js ）

示例：

#navmenu { margin: 0; padding: 0px; padding-top: 0px; text-align: center; } #navmenu ul { list-style: none; margin: 0; padding-top: 100px; padding-bottom: 0px; padding-right: 100px; position:relative; } #navmenu ul li { display: inline; float:left; transform: rotate(-45deg); transform-origin: 0% 50%; position:absolute; left:0; bottom:0; } #navmenu ul li:nth-child(2){left:60px} #navmenu ul li:nth-child(3){left:120px} #navmenu ul li:nth-child(4){left:180px} #navmenu ul a { background-color: #FFFFFF; border: 2px solid; border-radius: 25px; display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 0px; padding-right: 100px; text-decoration:none; text-align: center; transition-duration: 0.5s; transition-property: transform; } #navmenu ul a:hover { transform:translate(-50px, 0px); } #navmenu ul a:active { position:relative; top:3px; }

<div id="navmenu"> <ul> <li><a href="#">page one</a></li> <li><a href="#">page two</a></li> <li><a href="#">a longer page three</a></li> <li><a href="#">another page</a></li> </ul> </div>

如何去除旋转元素之间的间距？

2 个答案: