Adding curved / arch sides to css3 3d object via transforms

Question

I'm working on a small project of recreating a ping pong bat with CSS only in 3d space, so far this is the result http://codepen.io/IljaDaderko/pen/dpyZoL

As you might notice the .pad has no sides and at a certain point, you can see a flicker as it becomes see-through. I've been trying to figure out how to add sides to the bat, but it will require some sort of bending of an element so it goes all around, and I am not entirely sure how to achieve this.

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

In CSS, it is impossible. CSS is not a good language to make 3D objects.

I suggest you to use Three.js . It is a JavaScript library, where you can make 3D games.