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

Solution 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: 800px600px;
    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;
}

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