首先引用css

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /><link rel="stylesheet" type="text/css" href="css/style.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;}