纯CSS实现3D折纸效果

野性酷女 2022-08-25 05:17 265阅读 0赞

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

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

![SouthEast][]

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

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在线编辑或下载本 [效果][3D] 。

\---------------------------------------------------------------

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

[3D]: http://codepen.io/whqet/pen/LnEHD
[Link 1]: http://blog.csdn.net/whqet/article/details/19290285
[SouthEast]: /images/20220824/be4d27ef9c8d471389a5a94763796515.png
[whqet]: http://blog.csdn.net/whqet