html - 图像的曲线样式

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 轴的 flex 路径中来获得此效果。

另外，您可以获得悬停动画

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