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.