分裂背景图像与3D厚度效果

Question

我想拆分背景图片.例如这样的原始图像

我想要这样的效果:

这是我的代码

<style>
    div{

    -webkit-transform: skewY(175deg); 
    padding: 10px;
    margin: 10px;
    border: 10px;
    background-image: url(Chrysanthemum.jpg);
    width: 200px;
    height: 200px;
    background-origin: content-box;
    }
</style>
<div></div> 

但我找不到任何方法如何使用CSS或jQuery以相同的厚度效果分割这个背景.

Answer 1

这是一种3D方法,可以将图像分成3个部分并产生厚度效果.它响应迅速,依赖于:

• 3d变换图像的旋转和厚度效果
• "填充技术"以保持元素的纵横比
• 伪元素,使图像的每个部分的thikness
• 背景图像和背景位置

演示的3d旋转和厚厚的图像.

输出:

body{perspective:1000px;}
.imgWrap{
  position:relative;
  width:90%;
  margin:5% auto;
  padding-bottom:39%;
  transform: rotateY(25deg);
  transform-style:preserve-3d;
}
.imgWrap > div{
  position:absolute;
  top:0;
  width:30.3%;height:100%;
  float:left;
  background-image:url('http://i.imgur.com/FhZxJJp.jpg');
  background-size:auto 100%;
  transform-style:preserve-3d;
  outline: 1px solid transparent; /* prevent jagged edges in firefox */
}
.imgWrap .left  { left: 0;     background-position:   3% 0; }
.imgWrap .center{ left:34.83%; background-position: -97% 0; }
.imgWrap .right { left:69.66%; background-position:-197% 0; }
.imgWrap > div:before{
  content:'';
  position:absolute;
  top:0;right:100%;
  width:10%; height:100%;
  background:inherit;
  transform-origin:100% 50%;
  transform:rotateY(-90deg);
}
.imgWrap .left:before  { background-position:     0%   0; }
.imgWrap .center:before{ background-position: -1001.3% 0; }
.imgWrap .right:before { background-position: -2001.4% 0; }

<div class="imgWrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

请注意,您需要添加供应商前缀以支持浏览器.有关更多信息,请参阅canIuse.

Answer 2

此答案仅提供单一元素解决方案

2D解决方案是仅使用伪元素:before并:after模仿间隙.你只需要定位它们并给它们与边界的适当距离calc().

为了使其看起来更加3D,您可以结合使用而不是:transform perspective()rotateY()skewY()

div {
  position: relative;
  -webkit-transform: perspective(1000px) rotateY(30deg);
  transform: perspective(1000px) rotateY(30deg);
  margin: 50px 10px;
  background-image: url(http://placekitten.com/g/600/200);
  width: 600px;
  height: 200px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  background: white;
}
div:before {
  left: calc(33% - 5px);
}
div:after {
  right: calc(33% - 5px);
}

<div></div>

要实现非常简单的3D效果,可以将border-leftdiv和a添加border-right到伪元素.另外应用白色顶部和底部边框并使右边框半透明,伪元素甚至给出3D感觉.不幸的是,主要元素是不可能的.但在这里你至少可以玩边框透明度.

div {
  position: relative;
  -webkit-transform: perspective(1000px) rotateY(30deg);
  transform: perspective(1000px) rotateY(30deg);
  margin: 50px 10px;
  background-image: url(http://placekitten.com/g/600/200);
  width: 600px;
  height: 200px;
  background-origin: border-box;
  border-left: 5px solid rgba(0, 0, 0, 0.5);
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
  border-top: 4px solid white;
  border-bottom: 4px solid white;
  border-left: 10px solid white;
  border-right: 6px solid rgba(0, 0, 0, 0.5);
}
div:before {
  left: calc(33% - 7px);
}
div:after {
  right: calc(33% - 7px);
}

<div></div>