Arêtes arrondies du cube 3D

Question

J'ai créé un cube 3D. Je veux que les bords du cube soient lisses et courbés - pas tranchants.

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); 
    }; 
} 

Pour animer le cube .cube { animation: 5s de spin linéaire infini; }

S'il vous plaît aidez-moi à résoudre ce problème.

Answer 1

Il n'y a pas facile 'façon de le faire. Vous devrez faire 5 'arêtes' pour chaque 'jointure' et les positionner aux angles appropriés autour de ces coins. Alors les coins vont être assez complexes. Considérons que chaque 'facette' de cette structure filaire devrait être son propre élément dom.

Answer 2

Ok, un peu de violon mise à jour: http://jsfiddle.net/54juW/2/

Ajout rayon de frontière est pas ce que vous cherchez, je pense?

border-radius: 40px; 

Il est cependant difficile d'obtenir des coins lisses. Peut-être que vous pourriez ajouter plus de côtés dans le coin et ne pas les retourner 90 degrés à la fois, mais avoir plusieurs petits "côtés" que vous renversez très peu à chaque fois.

Un autre article qui fait quelque chose comme pour obtenir un peu d'un effet dés (pas vraiment bien si vous me demandez, mais peut-être un coup d'oeil dans la bonne direction)

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