3D 큐브의 둥근 모서리가

Question

3D 큐브를 만들었습니다. 큐브 가장자리가 부드럽고 곡선이되도록 - 날카로운 것이 아닌 싶습니다.

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> 

큐브 .cube 애니메이션에 대한 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); 
    }; 
} 

{ 애니메이션 : 스핀 5 초 무한 선형; }

이 문제를 해결할 수 있도록 도와주세요.

Answer 1

에는 '쉬운 없습니다 '이렇게하는 방법. 각 '조인'에 대해 5 개 이상의 '모서리'를 만들어 해당 모서리 주변의 적절한 각도에 배치해야합니다. 그렇다면 코너는 상당히 복잡 할 것입니다.

이 와이어 프레임의 각 '면'은 고유 한 돔 요소가되어야한다고 생각하십시오.

Answer 2

좋아, 조금 업데이트 바이올린 : http://jsfiddle.net/54juW/2/

국경 반경을 추가하면 내 생각은 당신이 찾고있는 것이 아니다?

border-radius: 40px; 

그러나 부드러운 모서리를 만드는 것은 어렵다고 생각합니다. 어쩌면 당신은 구석에 더 많은 변을 추가 할 수 있으며 한 번에 90도를 뒤집 지 않을 수 있지만 매번 조금씩 뒤집을 수있는 몇 개의 더 작은 "변"을 가질 수 있습니다.

또 다른 무언가가 주사위 효과를 조금하고 싶으 않는 기사 (당신이 저를 요구하는 경우에 정말 좋은하지,하지만 어쩌면 올바른 방향으로보기)

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