图像的弯曲的样式 [英] curved style for image

问题描述

如何在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.jpgalt =Klematis>< / div>  
 

解决方案

另外，您还可以获取悬停动画

  .test {width：800px; height：600px;位置：相对; transform-style：preserve-3d;透视：1200px;过渡：透视2s，变换2s; margin：50px;}。test：hover {perspective：600px; transform：scale（0.85）;}。element {background-image：url（http://placekitten.com/1000/666）;宽度：10％;高度：100％; background-size：800px 600px;左：50％; position：absolute;} element：nth-​​child（1）{transform：translateZ（600px）rotateY（calc（7deg * 5））translateZ（-600px）;} element：nth-​​child （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）;背景位置：40％0px;}。element：nth-​​child（6）{background-position：50％0px;} element：nth-​​child（7）{transform：translateZ ））translateZ（-600px）;背景位置：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>  

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>

解决方案

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>

这篇关于图像的弯曲的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！