curved style for image

问题

How to design the curved style for the image in 3d!

The original image has to be show like below image. Because In 3d rotation I need to show it in dynamically like the below image.

For editing in Photoshop for each image has take much time so it need to be manipulate at run time.

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>

回答1:

You can get this efect setting multiple divs with the same background image, and arranging them in a curved path along the Z axis.

As an extra, you can get an hover animation

.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>

来源：https://stackoverflow.com/questions/30816877/curved-style-for-image