首先引用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; }