我试图创建像立方体一样旋转的3d菜单ui，我正在努力实现3d旋转效果。
2个元素正在旋转，但我不知道如何显示3D立方体效果。任何建议如何使它像立方体一样旋转
http://jsfiddle.net/dfw3vLag/
<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上测试。
width和padding值导致旋转的面有些偏离，所以我更改了它们。
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旋转立方体UI，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27583393/