元素前后翻转 兼容IE

<li>

   <div>正面</div>

   <div>反面</div>

</li>

 

.powerculture .baseunit .bcontent ul li {

height: 1.58rem;

width: 2.65rem;

float: left;

margin-right: 0.2rem;

font-weight: 600;

color: #fff;

position: relative;

/* transform-style:preserve-3d; */

/* transition: all 2s; */

cursor: pointer;

 

-webkit-perspective: 500;

-moz-perspective: 500;

-ms-perspective: 500;

perspective: 500;

-ms-transform: perspective(500px);

-moz-transform: perspective(500px);

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

}

.powerculture .baseunit .bcontent ul li div {

height: 1.58rem;

width: 2.65rem;

position: absolute;

left: 0;

top: 0;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: 2s;

-moz-transition: 2s;

-o-transition: 2s;

-ms-transition: 2s;

transition: 2s;

}

.powerculture .baseunit .bcontent ul li div:nth-child(1) {

box-shadow: 0.02rem 0.02rem 0.1rem #333;

background: linear-gradient(to bottom,#01b6e9,#fff);

z-index: 1;

line-height: 1.58rem;

text-align: center;

font-size: 0.42rem;

}

/*  原来

.powerculture .baseunit .bcontent ul li div:nth-child(2) {

box-shadow: 0.02rem 0.02rem 0.1rem #333;

color: #333;

background: linear-gradient(to bottom , pink , #fff);

transform: rotateY(180deg);

line-height: 0.24rem;

}

.powerculture .baseunit .bcontent ul li div:nth-child(2) a {

color: #333;

height: 0.25rem;

line-height: 0.25rem;

width: 2.65rem;

display: inline-block;

}

.powerculture .baseunit .bcontent ul li div:nth-child(2) a span {

display: inline-block;

}

.powerculture .baseunit .bcontent ul li:hover div:nth-child(1){

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.powerculture .baseunit .bcontent ul li:hover div:nth-child(2) {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

transform: rotateY(0deg);

z-index: 3; /* 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front */

}