今天继续来看一个纯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前端开发技术,分享网页相关资源。
---------------------------------------------------------------