三維立方體的圓角邊緣

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/