图像的弯曲样式

Question

如何在 3d 中为图像设计弯曲样式！

原始图像必须如下图所示。因为在 3d 旋转中，我需要像下图一样动态显示它。

在 Photoshop 中对每张图像进行编辑需要花费大量时间，因此需要在运行时对其进行操作。

div.img img{
    margin: 5px;
    padding: 5px;
    height:250px;
    width: 500px;
    float: left;
    text-align: center;
}	

<div class="img">
<img src="http://po-web.com/wp-content/uploads/2013/12/it-solution1.jpg" alt="Klematis">
</div>

Answer 1

您可以使用相同的背景图像设置多个 div，并将它们排列在沿 Z 轴的弯曲路径中，从而获得这种效果。

作为额外的，您可以获得悬停动画

.test {
    width: 800px;
    height: 600px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: perspective 2s, transform 2s; 
    margin: 50px;
}

.test:hover {
    perspective: 600px;
    transform: scale(0.85);
}

.element {
    background-image: url(http://placekitten.com/1000/666);
    width: 10%;
    height: 100%;
    background-size: 800px 600px;
    left: 50%;
    position: absolute;
}

.element:nth-child(1) {
    transform: translateZ(600px) rotateY(calc(7deg * 5)) translateZ(-600px);
}

.element:nth-child(2) {
    transform: translateZ(600px) rotateY(calc(7deg * 4)) translateZ(-600px);
    background-position: 10% 0px;
}

.element:nth-child(3) {
    transform: translateZ(600px) rotateY(calc(7deg * 3)) translateZ(-600px);
    background-position: 20% 0px;
}

.element:nth-child(4) {
    transform: translateZ(600px) rotateY(calc(7deg * 2)) translateZ(-600px);
    background-position: 30% 0px;
}

.element:nth-child(5) {
    transform: translateZ(600px) rotateY(calc(7deg)) translateZ(-600px);
    background-position: 40% 0px;
}

.element:nth-child(6) {
    background-position: 50% 0px;
}

.element:nth-child(7) {
    transform: translateZ(600px) rotateY(calc(-7deg)) translateZ(-600px);
    background-position: 60% 0px;
}

.element:nth-child(8) {
    transform: translateZ(600px) rotateY(calc(-7deg * 2)) translateZ(-600px);
    background-position: 70% 0px;
}

.element:nth-child(9) {
    transform: translateZ(600px) rotateY(calc(-7deg * 3)) translateZ(-600px);
    background-position: 80% 0px;
}

.element:nth-child(10) {
    transform: translateZ(600px) rotateY(calc(-7deg * 4)) translateZ(-600px);
    background-position: 90% 0px;
}

<div class="test">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>