.aptitude ul
{
    width: 100%;
    position: relative;
}

.aptitude ul li
{
    float: left;
    width: 265px;
    margin-right: 46px;
    height: 370px;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.aptitude ul li:nth-child(4n+4) {
   margin-right:0;
}
.aptitude ul li:last-child
{
    margin-right: 0;
}

.aptitude ul li a
{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    
    /*舞台（动画元素的父容器）perspective*/
    -webkit-perspective: 800px;
    -moz-perspective: 800px;

}

.aptitude ul li a > div
{
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    /*动画元素transform-style*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transition: .8s ease-in-out ;
    -moz-transition:  .8s ease-in-out ;
    /*动画元素背后设置为hidden*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.aptitude ul li a div:first-child
{
    /*
    绕y轴旋转
    */
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    z-index: 2;
}

.aptitude ul li a div:last-child
{
    background: url("../index/img/zizhi/flipBg.png") no-repeat 0 0;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    z-index: 1;
}

.aptitude ul li a:hover div:first-child
{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

.aptitude ul li a:hover div:last-child
{
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
}

.aptitude ul li a div h2
{
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    padding: 0 30px;
    transform:translate(-50%,-50%);
    text-align: center;
    /*border-bottom: 1px #fff dashed;*/
}

.aptitude ul li a div p
{
    padding: 0 10px;
    font-size: 12px;
    text-indent: 2em;
    line-height: 18px;
}






























/*<div class="hcase_menu aptitude">
    <a class="hcase_list">
        <div class="imgFront"><img src="img/zizhi/DZZNH.png"></div>
        <div>电子智能化二级</div>
    </a>
    <a class="hcase_list">
        <div class="imgFront"><img src="img/zizhi/HJGLTX.png"></div>
        <div>环境管理体系</div>
    </a>
    <a class="hcase_list">
        <div class="imgFront"><img src="img/zizhi/ZLGLTX.png"></div>
        <div>质量管理体系</div>
    </a>                     
    <a class="hcase_list">
        <img src="img/zizhi/ZYJKGL.png">
        <div>职业健康管理体系</div>
    </a>
    <a class="hcase_list">
        <img src="img/zizhi/3AQYZH.png">
        <div>3A级企业综合信用证书</div>
    </a>
    <a class="hcase_list">
        <img src="img/zizhi/3AZHTSXY.png">
        <div>3A级重合同守信用企业证书</div>
    </a>                   
    <a class="hcase_list">
        <img src="img/zizhi/AQSC.png">
        <div>3A级重合同守信用企业证书</div>
    </a>
     <a class="hcase_list">
        
    </a>
    
</div>       */