纯CSS实现3D折纸效果

当前位置 : 首页 > 网页制作 > CSS > 纯CSS实现3D折纸效果

纯CSS实现3D折纸效果

来源: 作者: 时间:2016-01-25 10:02
今天继续来看一个纯CSS实现的3D折纸效果,效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的,没有看过的童鞋欢迎移步。本效果原理如下图所示,分别用 img, img:bef

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

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

\

好的,来看效果实现过程,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在线编辑或本效果。

 

 

Tag:
网友评论

<