CSS3鼠标经过图片3D翻转动画代码

CSS3鼠标经过图片3D翻转动画代码觉得很实用，直接可以拿来使用，适合于网站常见模块，transform: rotateY(90deg);运用了一些新的h5标签。。。

分类：图片代码 > 图片插件难易：

查看演示下载资源下载积分： 20 积分

首先引用css

运用了最新h5的3d翻转动画

.box{ position: relative; perspective: 1000px; } .box .box-img{ transform: rotateY(0); transition: all 0.50s ease-in-out 0s; } .box:hover .box-img{ transform: rotateY(-90deg); } .box .box-img img{ width: 100%; height: auto; } .box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 60px 20px; text-align: center; background: rgba(0,0,0,0.7); transform: rotateY(90deg); transition: all 0.50s ease-in-out 0s; } .box:hover .box-content{ transform: rotateY(0); } .box .title{ font-size: 20px; color: #fff; text-transform: uppercase; } .box .description{ font-size: 14px; line-height: 24px; color: #fff; } .box .title:after, .box .description:after{ content: ""; width: 80%; display: block; border-bottom: 1px solid #fff; margin: 15px auto; } .box .social-links{ margin: 0; padding: 0; list-style: none; } .box .social-links li{ display: inline-block; margin: 0 10px; } .box .social-links li a{ font-size: 20px; color: #a6a6a6; } .box .social-links li a:hover{ text-decoration: none; color: #fff; }