Split background image with 3D thickness effect

multiple background images css positioning
css background image
css 3d effect
multiple background images css animation
css background image size
css multiple background colors
reflection in css w3schools
css background image fit

I want to split background image. For example original image like this

and I want an effect like this:

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.

This answer provides single element solutions only

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(http://placekitten.com/g/600/200);
  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);

CSS Multiple Backgrounds, CSS allows you to add multiple background images for an element, through the background image to be as large as possible (but both its width and its height  Step by step PowerPoint tutorial on creating a 3D Split Photo Effect. Present your presentation images more creatively with this effect. This video is created by Ramgopal from Presentation Process

Things to Watch Out for When Working with CSS 3D, I began playing with CSS 3D transforms as soon as I noticed support in CSS was the second plane element got a rotateY() transform and a different background: In my defence, there are situations where the effect of overflow: hidden may not $dim: 40vmin; div { position: absolute; width: $dim; height: $dim; } .card { top:  You’ve probably seen the popular effect where an animator will take the foreground and the background and separate them in 3D space. The result when the camera moves is an awesomely realistic parallaxing 3D effect.

10 Snippets for Creating Unique Background Effects with CSS, <style> div{ -webkit-transform: skewY(175deg); padding: 10px; margin: 10px; border: 10px; background-image: url(Chrysanthemum.jpg); width:  CSS Blend Mode Color Change. What makes this background effect so cool is that the fixed element on top appears to change color as the user scrolls. The use of CSS mix-blend-mode property allows for the change in hue, which is dependent upon the contents of the background.

CSS Backgrounds and Borders Module Level 3, What makes this background effect so cool is that the fixed element on top First, a full-width hero image has a color overlay added on top to create a This example shows a split screen where the background is revealed  Find & Download Free Graphic Resources for 3d Background. 65,000+ Vectors, Stock Photos & PSD files. Free for commercial use High Quality Images Download here free vectors, stock photos and PSD files of 3d Background

CSS Image Effects #2: 3D Glasses, If an element is broken into multiple boxes, box-decoration-break The UA must not apply the border-color/style/width properties to ::first-line . The effect of repeat-y: One copy of the background image is centered, in between in order to create the required “3D” effect of groove, ridge, inset, or outset. 90 CSS Image Effects C ollection of hand-picked free HTML and CSS image effect code examples: 3d, animated, hover, magnify, overlay, transition, zoom , etc. Update of June 2018 collection. 17 new items.

Building a 3D Rotating Carousel with CSS and JavaScript, Read Part 1: The Vintage Washout Effect for some background on the lighten blend An anaglyph is a type of stereo 3D image created from two This creates an illusion of depth when paired with colored lenses that swap  After Effects Tutorial: Stroke Logo Reveal Outline Effect - Duration: 6:52. SonduckFilm 341,446 views

  • you could do something like that: stackoverflow.com/a/16935679/2633871
  • thanks for reply but can we do same effect with background-image.
  • looking good..just want to one thing more if you look image every split image take side width also. How can we do this is it possible?
  • The thickness will be hard to create... maybe you can do something similar to this tutorial. But you will need a lot of HTML elements and CSS manipulation...
  • Cool answer that was left without due attention
  • @Alexandr_TT ah, forgot that one :) I made some optimization and added a transparent version ;)
  • Please add (if possible) comments in the snippet code \ In the first comment, I meant that people did not appreciate the answer as it was worth it
  • @Alexandr_TT I answered two years after the question was asked so it's logical that it won't be seen a lot..
  • @Alexandr_TT added more comment to the first method, will do the second one probably later