/*图片3d盒子翻转*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	font-size: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	}

    ol, ul {
        list-style: none;
    }

     .content li, .content .wrapper, .content li img, .content li span
        {
           width: 100%;
            height:253px;
        }

       .content li
        {
            -webkit-perspective: 4000px;
        }

        .content .wrapper
        {
            position: relative;
            -webkit-transform-style: preserve-3d;
            -webkit-transition: -webkit-transform .6s;
        }

        .content li img
        {
            top: 0;
            border-radius: 3px;
            position: absolute;
            -webkit-transform: translateZ(111px);
            -webkit-transition: all .6s;
        }
   
        .content  li span
        {
            position: absolute;
            -webkit-transform: rotateX(-90deg) translateZ(120px);
        }


        .content li:hover .wrapper
        {
            -webkit-transform: rotateX(90deg);
        }


 .content li .ti {
        margin: 10% 8%;
        color: #fff;
        font-size:22px;
        top: 0;
        left: 0;
        z-index: 999;
        position: absolute;
    }
      .content li .sp {
        margin:  22% 8%;
        color: #fff;
        font-size:16px;
        top: 0;
        left: 0;
        z-index: 999;
        position: absolute;
    }