JS/CSS 组合 - 获得 3D 图像环绕效果答案

【问题标题】：JS/CSS Combo - Getting 3D Image Wrap EffectJS/CSS 组合 - 获得 3D 图像环绕效果
【发布时间】：2016-06-29 23:19:01
【问题描述】：

我正在尝试为我的网站上的图像获得 3D 环绕效果。 3D 环绕类似于 image

我需要的效果和图片一模一样

以下是我目前用来实现它的纯 CSS。

.gallery-wrap{
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0 0px 0px 0px black !important;
    -moz-box-shadow: 0 0px 0px 0px black !important;
    box-shadow: 0 0px 0px 0px black !important;
  }
  .gallery-wrap img{
    transform: perspective(400px) rotateY(10deg) translateX(7.5%) translateY(30px);
    margin-bottom: 5em !important;
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0 5px 7px -1px black;
    -moz-box-shadow: 0 5px 7px -1px black;
    box-shadow: 0 5px 7px -1px black;
  }
  .gallery-wrap div:after{
    content: '';
    width: 5%;
    height: 96%;
    background-image: url('<url of the same image the is to be wrapped>');
    position: absolute;
    top: 0px;
    transform: perspective(250px) rotateY(-55deg) translateY(7px) translateX(-10px);
    left: 0px;
    background-size: 10% 750%;
    background-position-x: 0%;
  }

代码有效，但问题是它不适用于所有图像。高度大于宽度的图像将导致上述代码。

我想知道是否有人可以通过 JS 算法帮助我/将我指向现有的（最好是免费的）js 来执行此操作。该算法应捕获img 元素的宽度和高度，然后为上述代码渲染transform 值。

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

想通了。代码如下

.gallery-wrap{
    perspective: 1000px;  //required to get the correct 3D depth
}
.gallery-wrap div:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: left; //This and the next 2 lines are for left edge. Change bottom/top/right accordingly
    transform: rotateY(90deg); // Y is the Axis of rotation. Change accordingly. 90deg will flip (mirror) the image
    transform-origin: left; // Which side to be flipped
}
.gallery-wrap div {
    display: block;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("<image_link>"); // Just to add a gradient effect to the farther side
    background-size: 0, cover;  //To get the gradient effect
    transform-style: preserve-3d;
    transition: all 0.5s;
    margin: 10% auto; // This and the next line 2 line are dimension adjustments
    width: 80%;
    transform: rotateY(37.5deg); // This is for the main image rotation
    transform-origin: center; // This is for point of origin of the transform. Use center for the best effect;
}

图片必须用作背景图片。

元素的结构 - .gallery-wrap > div

感谢原始来源 - TheCodePlayer

【讨论】：