纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，请大家先到我的codepen里看看效果，效果如下图所示。

background-size:100%;
position:relative;
}
.img:before{
content:attr(data-text);
width:100%;
height:40px;
position:absolute;
top:100%;
left:0;
background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg") left bottom;
background-size:100%;
/*设置图片标题字体样式*/
font-size: 1.6vw;
font-family: Montserrat, Arial, sans-serif;
color:#fff;
text-shadow:1px 1px 3px #000;
text-align:center;
line-height:40px;

/*图像下半部分折下去*/
transform-style: preserve-3d;
transform-origin: center top;
transition:all 1s transform;
transform:rotateX(-80deg);
}
.img:after {
content: '';
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
box-shadow: 0 0 100px 50px rgba(0, 0, 0, .2), inset 0 0 250px 250px rgba(0, 0, 0, .2);

/*阴影部分的动画参数*/
perspective: 1000px;
transform-style: preserve-3d;
transform-origin: center bottom;
transform: rotateX(90deg) translateZ(-80px) scale(0.75);
}
/*鼠标悬停之后的图像折上去*/
.container:hover .img{
transform: rotateX(75deg) translateZ(50px);
}
/*鼠标悬停之后阴影动画*/
.container:hover .img:after{
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
transform: rotateX(-5deg) translateZ(-80px) scale(1);
}

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

大家也可以看看另外一个效果《纯CSS实现3D折纸效果》，请移步这里。

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

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