<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 */
}