纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。

本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。然后分别对30%和20%两个元素实现旋转的动画，设置相同的变换效果，不同的变换延迟时间实现依次变换。注意打开、关闭两个状态的延迟设置不同。

好的，来看效果实现过程，html依然是非常简单。

<div class="container">
  <div class="img" data-text="Hello Girl"></div>
</div>

CSS稍微复杂点，捋清楚思路也是挺简单的。

/* 为了简化操作，本效果使用了prefix free，因此可勿略可恶的厂商前缀。 */
/* 背景还是弄个渐变 */
body { 
  min-height:600px;
  background: linear-gradient( hsl(200,51%,40%), #E0D7A3);
}
/* 容器的设置，容器的宽和高的设置非常重要，因为后面很多数值都是相对数值。 */
.container{
  width:300px;
  height:360px;
  margin:50px auto;
}

.img{
  /* 这个宽和高的百分比基于父对象--.container */
  width:100%;
  height:50%;
  /* 引入图像，同时通过设置background-size实现背景图像的缩放 */
  background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg");
  background-size:100%;
  /* 实现before和after两个伪类对象的绝对定位的“钩子” */
  position:relative;
}
.img:before{
  content:"";
  /* 本伪类里面的百分比基于.img */
  width:100%;
  height:75%;  
  position:absolute;
  top:100%;
  left:0;
  /* 背景设置及偏移 */
  background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg");
  background-size:100%;
  background-position:0 -180px;
  /* 变换设置，注意延迟的设置，这里是关闭时的效果 */
  transform-style: preserve-3d;
  transform-origin: center top;
  transform: perspective(250px) rotateX(-90deg);
  transition: 0.2s ease 0.2s;
}
.img:after{
  content:"";
  /* 本伪类里面的百分比基于.img */
  width:100%;
  height:50%;
  position:absolute;
  top:175%;
  left:0;
  /* 背景设置及偏移 */
  background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg");
  background-size:100%;
  background-position:0 -316px;
  /* 变换设置，注意延迟的设置，这里是关闭时的效果 */  
  transform-style: preserve-3d;
  transform-origin: center top;
  transform: perspective(250px) rotateX(-90deg);
  transition: 0.2s ease 0s;
}
.container:hover .img:before{
  /* 注意延迟的设置，这里是打开时的效果 */
  transition: 0.2s linear 0s;
  transform: perspective(350px) rotateX(0deg);
}
.container:hover .img:after{
  /* 注意延迟的设置，这里是打开时的效果 */
  transition: 0.2s linear 0.2s;
  transform: perspective(350px) rotateX(0deg);
}

相信大家结合注释应该能看明白，不再具体具体解释代码书写过程，大家可以到codepen在线编辑或下载本效果。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------