如何为图像创建3D效果？

Question

我们正在开发书库类型的界面，并想了解实现图像效果的最佳/最简单方法？

HTML / CSS或iOS引用将有所帮助。理想情况下，亚马逊使用的效果非常棒 - 使用基本的HTML / CSS代码。

我假设我们需要让代码放置一块黑色/灰色背景然后倾斜图像以使左侧高度小于右侧高度？

感谢任何指针或jsFiddle代码。我不是在寻找悬停 - 只是标准的展示位置选项。

Answer 1

您可以使用perspective和:before :pseudo element来执行此操作：

dabblet

上的演示

HTML：

<div class="img-1">
    <img src="http://s25.postimg.org/xhz22u173/9780439287197_p0_v2_s260x420.jpg" />
</div>
<div class="img-2">
    <img src="http://s25.postimg.org/xhz22u173/9780439287197_p0_v2_s260x420.jpg" />
</div>

CSS：

body {
    background: lightblue;
}
.container {
    width: 620px;
}
.img-1 {
    position: relative;
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    margin-top: 50px;
    margin: 20px;
}
.img-1 img {
    transform: rotateY(-30deg);
}
.img-1:before {
    content: "";
    position: absolute;
    width: 260px;
    height: 100%;
    background-color: black;
    transform: rotateY(-30deg) translateZ(-30px);
    border-radius: 15px;
}
.img-2 {
    position: relative;
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    persepctive: 1000px;
    margin: 20px;
    margin-top: 50px;
}
.img-2 img {
    transform: rotateY(40deg);
}
.img-2:before {
    content: "";
    top: -15px;
    position: absolute;
    width: 19%;
    height: 105.6%;
    background-color: black;
    transform: translateX(-16px) translateY(2.7px) rotateY(-55deg)
}

Answer 2

这是一个让你朝着正确方向前进的方法：

http://jsfiddle.net/larryjoelane/6u2x6vwd/1/

示例css代码：

        .three-d{

      height:250px;
      width:250px;
      background-color:green;/*for testing only*/
      border:black solid 1px;

      /*rotate the image on its Y axis */
      -webkit-transform: rotateY(145deg); /* Chrome, Safari, Opera */
      transform: rotateY(145deg);

      /*rotate the image on its Z axis */
      -webkit-transform: rotateZ(179deg); /* Chrome, Safari, Opera */
      transform: rotateZ(179deg);


    }

确保更改css中的度数值以更改旋转（确保更改-web-kit-transform和tranform代码块的所有值：

示例HTML：

  <img class="three-d" alt="3D looking image" src="pathToImage.png" >