用於圖像的曲線樣式

Question

如何用3D設計圖像的曲線樣式！

原始圖像必須顯示如下圖像。因爲在3D旋轉中，我需要像下圖一樣動態顯示它。

對於每張圖片在Photoshop中進行編輯需要很長時間，所以需要在運行時進行操作。

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

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