I'm trying a simple css cube and applying rounded corners shows that the box is empty and transparent, applying backface-visibility: hidden; makes it like filled with white color and the question is, if is there a way to style the appereance of colors and other properties to the behavior of the mentioned property backface-visibility?
backface-visibility: visible
backface-visibility: hidden
.welcome {
color:green;
font-size:36px;
font-family:cursive;
text-align:center;
padding:20px;
}
.* {
background-color: black;
}
h2 {
background-color: aliceblue;
box-shadow: 2px 2px 10px #666;
padding: 0.25em;
text-align:center;
}
div.space3D {
width: 300px;
height: 300px;
margin: 3em auto 0 auto;
border: 1px solid rgb(0,255,0);
position: relative;
perspective-origin: center -50%;
perspective: 300px;
transform: scale(0.75);
transform-style: preserve-3d;
}
div.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-150px);
animation-name: gira;
animation-duration: 15000ms;
animation-iteration-count: infinite;
box-sizing: border-box;
}
div.base {
position: absolute;
width: 150px;
height: 150px;
background-color: rgba(0,0,0,0.15);
transform: translateX(75px) translateY(75px) rotateX(90deg) translateZ(-200px);
box-shadow: 0 0 50px 100px rgba(0,0,0,0.15);
transform-style: preserve-3d;
}
div.cara {
position: absolute;
width: 298px;
height: 298px;
background-color: #c2ffef;
border: 3px solid red;
border-radius: 2em;
font-size: 3em;
color: black;
text-align: center;
line-height: 298px;
box-shadow: 0px 0px 5px rgba(255,150,0,0.25);
transform-style: preserve-3d;
/*backface-visibility:hidden;*/
}
div.cara1 { /* Frente */
transform: translateZ(150px);
}
div.cara2 { /* Atrás */
transform: rotateY(180deg) translateZ(150px);
}
div.cara3 { /* Izquierda */
transform: rotateY(-90deg) translateZ(150px);
}
div.cara4 { /* derecha */
transform: rotateY(90deg) translateZ(150px);
}
div.cara5 { /* abajo */
transform: rotateX(-90deg) translateZ(150px);
}
div.cara6 { /* arriba */
transform: rotateX(90deg) translateZ(150px);
}
@keyframes gira {
0% {
transform: translateZ(-150px) rotateY(0deg);
}
100% {
transform: translateZ(-150px) rotateY(360deg);
}
}<h2>Cubo 3D con puro HTML5 y CSS3</h2>
<div class="space3D">
<div class="cube">
<div class="base"></div>
<div class="cara cara1">rubik</div>
<div class="cara cara2"></div>
<div class="cara cara3"></div>
<div class="cara cara4"></div>
<div class="cara cara5"></div>
<div class="cara cara6"></div>
</div><!-- termina cubo 3d -->
</div><!-- termina espacio 3d -->
</body>
</html>