通过变换将弯曲/拱形侧面添加到 css3 3d 对象

Question

我正在做一个仅在 3d 空间中使用 CSS 重新创建乒乓球棒的小项目，到目前为止这是结果http://codepen.io/IljaDaderko/pen/dpyZoL

您可能会注意到.pad 没有边，并且在某个点上，您可以看到闪烁，因为它变得透明。我一直在试图弄清楚如何为球棒添加边，但它需要对元素进行某种弯曲以便它四处移动，我不完全确定如何实现这一点。

代码：

.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

在 CSS 中，这是不可能的。 CSS 不是制作 3D 对象的好语言。

我建议你使用Three.js。它是一个 JavaScript 库，您可以在其中制作 3D 游戏。