ankit ankit - 7 months ago 38
jQuery Question

Split background image with 3D thickness effect

I want to split background image. For example original image like this
Original 3D rotated image

and I want an effect like this:

slit image in 3 and give a thickness effect

This is my code


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

But I can't find any way how to split this background with the same thickness effect with CSS or jQuery.


A 2D solution would be to just use the pseudo elements :before and :after to imitate the gaps. You only need to position them and give them the proper distance to the border with calc().

To make it look more 3D, you can use transform: perspective(); in combination with rotateY() instead of skewY():

div {
  position: relative;
  -webkit-transform: perspective(1000px) rotateY(30deg);
  transform: perspective(1000px) rotateY(30deg);
  margin: 50px 10px;
  background-image: url(;
  width: 600px;
  height: 200px;
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);