Thêm bên cong/vòm để CSS3 đối tượng 3d qua biến

Question

Tôi đang làm việc trên một dự án nhỏ tái tạo một con dơi ping pong với CSS chỉ trong không gian 3d, cho đến nay đây là kết quả http://codepen.io/IljaDaderko/pen/dpyZoL

Như bạn có thể nhận thấy các .pad không có mặt và tại một thời điểm nhất định, bạn có thể thấy một nhấp nháy khi nó trở thành xem qua. Tôi đã cố gắng tìm ra cách để thêm mặt vào dơi, nhưng nó sẽ đòi hỏi một số loại uốn của một yếu tố để nó đi xung quanh, và tôi không hoàn toàn chắc chắn làm thế nào để đạt được điều này.

Code:

.wrapper { 
 
    text-align: center; 
 
    padding: 20px 0; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.bat { 
 
    display: inline-block; 
 
    -webkit-animation: rotate 10s infinite; 
 
    animation: rotate 10s infinite; 
 
    position: relative; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.pad { 
 
    width: 200px; 
 
    height: 220px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.pad .front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #CC0000; 
 
    border-radius: 60% 60% 45% 45%; 
 
} 
 
.pad .back { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #66C6CC; 
 
    -webkit-transform: translateY(-100%) translateZ(10px); 
 
    transform: translateY(-100%) translateZ(10px); 
 
    border-radius: 60% 60% 45% 45%; 
 
    background-size: 50%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-image: url("https://loot.io/assets/e76ce259fa1ceffeb4edf110b55ea931.svg"); 
 
} 
 
.handle { 
 
    position: absolute; 
 
    top: 220px; 
 
    left: 50%; 
 
    margin-left: -25px; 
 
    width: 50px; 
 
    height: 120px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.handle .front { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-size: auto 100%; 
 
    background-image: url("http://www.texturezine.com/wp-content/uploads/2009/12/5wood.jpg"); 
 
} 
 
.handle .back { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-size: auto 100%; 
 
    -webkit-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
    background-image: url("http://www.texturezine.com/wp-content/uploads/2009/12/5wood.jpg"); 
 
    -webkit-transform: translateY(-200%) translateZ(10px); 
 
    transform: translateY(-200%) translateZ(10px); 
 
} 
 
.handle .left { 
 
    width: 10px; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-image: url("https://fdrfreebies.s3-us-west-1.amazonaws.com/wp-content/uploads/2016/04/wood-free-txtr-4.jpg"); 
 
    -webkit-transform: rotateY(90deg) translateX(-5px) translateY(-100%) translateZ(-5px); 
 
    transform: rotateY(90deg) translateX(-5px) translateY(-100%) translateZ(-5px); 
 
} 
 
.handle .right { 
 
    width: 10px; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-image: url("https://fdrfreebies.s3-us-west-1.amazonaws.com/wp-content/uploads/2016/04/wood-free-txtr-4.jpg"); 
 
    -webkit-transform: rotateY(90deg) translateX(-5px) translateY(-300%) translateZ(45px); 
 
    transform: rotateY(90deg) translateX(-5px) translateY(-300%) translateZ(45px); 
 
} 
 
.handle .bottom { 
 
    background-size: auto 100%; 
 
    background-image: url("http://de.academic.ru/pictures/dewiki/82/Rio-Palisander,_dunkel_Holz.JPG"); 
 
    width: 10px; 
 
    height: 50px; 
 
    -webkit-transform: translateY(-385px) translateX(20px) translateZ(5px) rotateY(90deg) rotateX(90deg); 
 
    transform: translateY(-385px) translateX(20px) translateZ(5px) rotateY(90deg) rotateX(90deg); 
 
} 
 
@-webkit-keyframes rotate { 
 
    50% { 
 
    -webkit-transform: rotateY(360deg) rotateX(40deg); 
 
    transform: rotateY(360deg) rotateX(40deg); 
 
    } 
 
} 
 
@keyframes rotate { 
 
    50% { 
 
    -webkit-transform: rotateY(360deg) rotateX(40deg); 
 
    transform: rotateY(360deg) rotateX(40deg); 
 
    } 
 
}

<div class='wrapper'> 
 
    <div class='bat'> 
 
    <div class='pad'> 
 
     <div class='front'></div> 
 
     <div class='back'></div> 
 
    </div> 
 
    <div class='handle'> 
 
     <div class='front'></div> 
 
     <div class='left'></div> 
 
     <div class='back'></div> 
 
     <div class='right'></div> 
 
     <div class='bottom'></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Trong CSS, nó là không thể. CSS không phải là ngôn ngữ tốt để tạo các đối tượng 3D.

Tôi khuyên bạn nên sử dụng Three.js. Nó là một thư viện JavaScript, nơi bạn có thể tạo các trò chơi 3D.