3D origami with pure CSS

Today, we will continue to look at the 3D origami effect implemented by pure CSS. The effect is as follows. Developed based on the previous effect "3D hover Effect of images with pure CSS", you are welcome to move on to the children's shoes you haven't seen before.

The principle of this effect is shown in. img ,. img: before and. img: after three elements are loaded into three parts: 50%, 30%, and 20%. The three parts are set to the same background image. The following two background-position attributes implement background offset. Then, the animation of the 30% and 20% elements is rotated respectively, and the same transformation effect is set. Different transformation delay times are transformed in sequence. Note that the delay settings for the Enable and disable statuses are different.

Okay. As for the implementation process, html is still very simple.

 

CSS is a little more complex, and it is quite easy to understand the idea clearly.

 

 

/* To simplify the operation, prefix free is used in this tutorial. Therefore, do not use a slightly hateful vendor prefix. * // * Set the background gradient */body {min-height: 600px; background: linear-gradient (hsl (40%, 51%,), # E0D7A3 );} /* the setting of container width and height is very important because many values are relative values. */. Container {width: 300px; height: 360px; margin: 50px auto ;}. img {/* This width and height percentage is based on the parent object --. container */width: 100%; height: 50%;/* introduce the image and Set background-size to scale the background image */background: url ( http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg ); Background-size: 100%;/* implement the "hook" for absolute positioning of the before and after pseudo-class objects */position: relative ;}. img: before {content:;/* The percentage in this pseudo class is based on. img */width: 100%; height: 75%; position: absolute; top: 100%; left: 0;/* background setting and offset */background: url ( http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg ); Background-size: 100%; background-position: 0-180px;/* change settings, pay attention to the delay settings, here is the effect of the off */transform-style: preserve-3d; transform-origin: center top; transform: perspective (250px) rotateX (-90deg); transition: 0.2 s limit 0.2 s ;}. img: after {content:;/* The percentage in this pseudo class is based on. img */width: 100%; height: 50%; position: absolute; top: 175%; left: 0;/* background setting and offset */background: url ( http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg ); Background-size: 100%; background-position: 0-pixel PX;/* change settings, pay attention to the delay settings, here is the effect of the off */transform-style: preserve-3d; transform-origin: center top; transform: perspective (250px) rotateX (-90deg); transition: 0.2 s limit 0 s ;}. container: hover. img: before {/* pay attention to the delay settings. Here is the effect of opening */transition: 0.2 s linear 0 s; transform: perspective (350px) rotateX (0deg );}. container: hover. img: after {/* pay attention to the delay settings. Here is the effect of opening */transition: 0.2 s linear 0.2 s; transform: perspective (350px) rotateX (0deg );}

I believe that you can understand the code writing process with comments. You can go to codepen to edit or download the results online.