<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://www.cls.edu.cn/uploads/Boosen1322558717.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">郭红卫 <small> 北京</small></h4> <h5><a href="http://www.cls.edu.cn">生命科学联合中心</a> 项目负责人</h5> <hr style="margin:8px auto"> <span class="label label-primary">衰老</span> <span class="label label-primary">植物激素调控机理</span> <span class="label label-success">信号转导</span> <span class="label label-primary">表观遗传</span> <span class="label label-warning">生物信息</span> </div> </div> </div> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://liulab.dfci.harvard.edu/images/Liu.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">刘小乐 <small> 美国</small></h4> <h5><a href="http://life.tongji.edu.cn">同济大学生命科学与技术学院</a> 兼职教授</h5> <hr style="margin:8px auto"> <span class="label label-success">癌症研究</span> <span class="label label-default">转录调控</span> <span class="label label-default">表观遗传</span> <span class="label label-success">生物信息</span> <span class="label label-warning">肺癌样本</span> </div> </div> </div> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://www.cls.edu.cn/uploads/Boosen1322558717.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">郭红卫 <small> 北京</small></h4> <h5><a href="http://www.cls.edu.cn">生命科学联合中心</a> 项目负责人</h5> <hr style="margin:8px auto"> <span class="label label-default">植物</span> <span class="label label-default">激素</span> <span class="label label-info">信号转导</span> <span class="label label-default">表观遗传</span> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://www.cls.edu.cn/uploads/Boosen1322558717.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">郭红卫 <small> 北京</small></h4> <h5><a href="http://www.cls.edu.cn">生命科学联合中心</a> 项目负责人</h5> <hr style="margin:8px auto"> <span class="label label-default">植物</span> <span class="label label-default">激素</span> <span class="label label-info">信号转导</span> <span class="label label-default">表观遗传</span> </div> </div> </div> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://www.cls.edu.cn/uploads/Boosen1322558717.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">郭红卫 <small> 北京</small></h4> <h5><a href="http://www.cls.edu.cn">生命科学联合中心</a> 项目负责人</h5> <hr style="margin:8px auto"> <span class="label label-default">植物</span> <span class="label label-default">激素</span> <span class="label label-info">信号转导</span> <span class="label label-default">表观遗传</span> </div> </div> </div> <div class="col-lg-4"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object dp img-circle" src="http://www.cls.edu.cn/uploads/Boosen1322558717.jpg" style="width: 100px;height:100px;"> </a> <div class="media-body"> <h4 class="media-heading">郭红卫 <small> 北京</small></h4> <h5><a href="http://www.cls.edu.cn">生命科学联合中心</a> 项目负责人</h5> <hr style="margin:8px auto"> <span class="label label-default">植物</span> <span class="label label-default">激素</span> <span class="label label-info">信号转导</span> <span class="label label-default">表观遗传</span> </div> </div> </div> </div>

.media { /*box-shadow:0px 0px 4px -2px #000;*/ margin: 20px 0; padding:30px; } .dp { border:10px solid #eee; transition: all 0.2s ease-in-out; } .dp:hover { border:2px solid #eee; transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg); /*-webkit-font-smoothing:antialiased;*/ }