我正在尝试创建像立方体一样旋转的 3d 菜单 ui，我正在努力实现 3d 旋转效果。 2 个元素在旋转，但我不知道如何显示 3d 立方体效果。任何关于如何让它像立方体一样旋转的建议
<style>
body
{
background: #333;
font-family: sans-serif;
color: #333333;
}
ul.list
{
list-style-type: none;
margin: 50px auto;
padding: 0;
width: 300px;
}
ul.list li
{
position: relative;
height: 40px;
line-height: 40px;
margin-bottom: 2px;
}
ul.list li div.front
{
position:absolute;
transform: rotateX( 0deg );
-webkit-transform-style: preserve-3d;
z-index:2;
transform-origin: top right;
background:#FC0;
width:90%;
height:100%;
padding: 0 10px;
backface-visibility: hidden;
transition: transform 2s linear 0s;
}
ul.list li div.back
{
position:absolute;
transform: rotateY( -90deg );
-webkit-transform-style: preserve-3d;
z-index:1;
transform-origin: top left;
background:#FC0345;
width:90%;
height:100%;
padding: 0 10px;
backface-visibility: hidden;
transition: transform 2s linear 0s;
}
ul.list li:hover
{
cursor: pointer;
}
ul.list li:hover div.front
{
transform: rotateY( 90deg );
}
ul.list li:hover div.back
{
transform: rotateY( 0deg );
}
</style>
<ul class="list">
<li>
<div class="back"></div>
<div class="front">list A</div>
</li>
<li>
<div class="back"></div>
<div class="front">list B</div>
</li>
<li>
<div class="back"></div>
<div class="front">list C</div>
</li>
<li>
<div class="back"></div>
<div class="front">list D</div>
</li>
</ul>
最佳答案
不确定您期望它看起来像什么，但在 here 的帮助下，我能够将您的 fiddle 更新为 this .
li 本身在 hover 上旋转，而不是分别在 div.front 和 div.back 上旋转——它们'最初只是定位和旋转。
在 Chrome v39 上测试。
宽度和填充值导致旋转的脸有点偏离，所以我改变了它们。
body {
background: #333;
font-family: sans-serif;
color: #333333;
}
ul.list {
list-style-type: none;
margin: 50px auto;
padding: 0;
width: 300px;
}
ul.list li {
position: relative;
height: 40px;
line-height: 40px;
margin-bottom: 2px;
transition: transform 1s linear 0s;
transform-style: preserve-3d;
transform-origin: left left -145px;
}
ul.list li div.front {
position: absolute;
background: #FC0;
width: 100%;
height: 100%;
/* padding: 0 10px; */
transform: translateZ(145px);
box-sizing: border-box;
}
ul.list li div.back {
position: absolute;
background: #FC0345;
width: 100%;
height: 100%;
/* padding: 0 10px; */
transform: rotateY(90deg) translateZ(-145px);
}
ul.list li:hover {
cursor: pointer;
transform: rotateY(90deg);
}<body>
<ul class="list">
<li>
<div class="back"></div>
<div class="front">list A</div>
</li>
<li>
<div class="back"></div>
<div class="front">list B</div>
</li>
</ul>
</body>关于javascript - CSS 旋转 Cube UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27583393/