三维立方体的圆角边缘

Question

我已经创建了一个三维立方体。我希望立方体的边缘平滑和弯曲，而不是尖锐。

HTML

<div class="wrap"> 
<div class="cube"> 
    <div class="front">front</div> 
    <div class="back">back</div> 
    <div class="top">top</div> 
    <div class="bottom">bottom</div> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div> 
</div> 

CSS

.wrap { 
    perspective: 800px; 
    perspective-origin: 50% 100px; 
} 

.cube { 
    position: relative; 
    width: 200px; 
    transform-style: preserve-3d; 
} 

.cube div { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    background: #aaa; 
} 

.back { 
    transform: translateZ(-100px) rotateY(180deg); 
} 

.right { 
    transform: rotateY(-270deg) translateX(100px); 
    transform-origin: top right; 
} 

.left { 
    transform: rotateY(270deg) translateX(-100px); 
    transform-origin: center left; 
} 

.top { 
    transform: rotateX(-90deg) translateY(-100px); 
    transform-origin: top center; 
} 

.bottom { 
    transform: rotateX(90deg) translateY(100px); 
    transform-origin: bottom center; 
} 

.front { 
    transform: translateZ(100px); 
} 

@keyframes spin { 
    from { 
     transform: rotateY(0); 
    } 

    to { 
     transform: rotateY(360deg); 
    }; 
} 

对于动画立方体 为.cube { 动画：自旋5S无限线性; }

请帮我解决这个问题。

Answer 1

没有“容易'这样做的方式。您必须为每个“连接”制作5个“边”，并将它们定位在角落周围的适当角度。那么角落将会相当复杂。

请考虑这个线框的每个“facet”都需要是它自己的dom元素。

Answer 2

好，有点更新小提琴：http://jsfiddle.net/54juW/2/

添加边框半径是不是你要找什么，因为我想的？

border-radius: 40px; 

让光滑的角落然而很难实现我认为。 也许你可以在角落添加更多的边，而不是一次翻转90度，但有几个较小的“边”，每次翻转很少。

另一篇文章这并不像得到一个位的骰子效果（不是真的很好，如果你问我，但也许在正确的方向一看）

http://cssnerd.com/2012/02/26/css-3d-cube-dice/