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

这是一种将图像分成3个部分并产生厚度效果的3D方法。它响应迅速，依赖于：

3d转换图像的旋转和厚度效果
＆＃34;填充技术＆＃34;保持元素的宽高比
用于制作图像各部分厚度的伪元素
背景图片和背景位置

演示 3d rotated and thick image 。

输出：

＆＃13;

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; }

＆＃13;

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

＆＃13;

请注意，您需要为浏览器支持添加供应商前缀。有关详细信息，请参阅canIuse。

Answer 2

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

2D解决方案是仅使用伪元素:before和:after来模仿间隙。您只需要position他们并使用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效果，您可以向div添加border-left，为伪元素添加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>

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

2 个答案: