html5 图片拱形旋转,html – 通过变换向css3 3d对象添加弯曲/拱形边

我正在研究一个只在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);

}

}