CSS 3D変換でギャップが残る

Question

前後の疑似セレクタを使用してCSSで単純なキューブを作成しようとしています。

ただし、立方体の上端と立方体のマゼンタの背景が見える側の間にわずかな隙間があります。

body{background:magenta;perspective: 300000;} 

div{ 
    width:100px; 
    height:100px; 
    background:yellow; 
    transform-style: preserve-3d; 
    transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px); 
} 

/* Right */ 
div:after { 
    background: #c5c500; 
    transform: rotateX(-90deg); 
    transform-origin: 100% 0%; 
    top: 100%; 
    width: 100%; 
    height: 100px; 
    content: ''; 
    position: absolute; 
    backface-visibility: hidden; 
    background-clip:content-box; 
} 

/* Left */ 
div:before { 
    background: #f3f370; 
    transform: translateZ(-100px) rotateY(-90deg); 
    transform-origin: 0 100%; 
    width: 100px; 
    height: 100%; 
    content: ''; 
    position: absolute; 
    backface-visibility: hidden; 
    background-clip:content-box; 
} 

あなたは背景がキューブを通して見えないように私は、このギャップを取り除くことができますどのようにこのフィドルhttp://jsfiddle.net/04ggen30/

でこの動作を確認することができますか？

Answer 1

実際にはギャップではありません。

境界には、要素がピクセルの一部しか覆わないピクセルがあります。アンチエイリアシングは、要素の色と背景の色をブレンドします。キューブのもう一方の面についてもこれを繰り返し、ピクセルの一部もカバーします。結果には背景の寄与はまだありません。

HTML内に3つのdivを設定した場合、各顔に1つずつ設定すると解決できます。

さて、あなたは擬似要素を使用することができ、キューブ内の1ピクセルを移動し、影と単一の要素

body{background:magenta;perspective: 300000;} 
 

 
div{ 
 
    width:100px; 
 
    height:100px; 
 
    background:yellow; 
 
    transform-style: preserve-3d; 
 
    transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px); 
 
} 
 

 
/* Right */ 
 
div:after { 
 
    background: #c5c500; 
 
    transform: rotateX(-90deg); 
 
    transform-origin: 100% 0%; 
 
    top: 100%; 
 
    width: 100%; 
 
    height: 100px; 
 
    content: ''; 
 
    position: absolute; 
 
    backface-visibility: hidden; 
 
    background-clip:content-box; 
 
    box-shadow: 0px -1px 0px 0px #c5c500; 
 
} 
 

 
/* Left */ 
 
div:before { 
 
    background: #f3f370; 
 
    transform: translateZ(-100px) rotateY(-90deg); 
 
    transform-origin: 0 100%; 
 
    width: 100px; 
 
    height: 100%; 
 
    content: ''; 
 
    position: absolute; 
 
    backface-visibility: hidden; 
 
    background-clip:content-box; 
 
    box-shadow: 1px 1px 0px 0px #f3f370; 
 
}

<div></div>

を使用して

body{background:magenta;perspective: 300000;} 
 

 
div{ 
 
    width:100px; 
 
    height:100px; 
 
    background:yellow; 
 
    transform-style: preserve-3d; 
 
    transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px); 
 
} 
 

 
.right { 
 
    background: #c5c500; 
 
    transform: rotateX(-90deg); 
 
    transform-origin: 100% 0%; 
 
    top: 100%; 
 
    width: 100%; 
 
    height: 100px; 
 
    position: absolute; 
 
    backface-visibility: hidden; 
 
    background-clip:content-box; 
 
} 
 

 
.left { 
 
    background: #f3f370; 
 
    transform: translateZ(-100px) rotateY(-90deg); 
 
    transform-origin: 0 100%; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: absolute; 
 
    backface-visibility: hidden; 
 
    background-clip:content-box; 
 
} 
 

 
.right::after, .left:after { 
 
    content: ''; 
 
    top: 0px; 
 
    width: inherit; 
 
    height: inherit; 
 
    position: absolute; 
 
    background: inherit; 
 
    transform: translateZ(-1px); 
 
}

<div> 
 
    <div class="right"></div> 
 
    <div class="left"></div> 
 
</div>

もう働かそれをより不透明にします

Answer 2

私はちょうどwidth: 101px;をbefore要素とafter要素の両方に変更しました。あなたはこのフィドルhttp://jsfiddle.net/04ggen30/2/を見ることができます。または、transformプロパティをtransform: translateZ(-99px) rotateY(-90deg);に変更して、ちょうど、translateZを-100pxから99pxに減らすことができます。