如何在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>
答案 0 :(得分:4)
您可以使用相同的背景图像设置多个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;
}
&#13;
<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>
&#13;