先看下菜鸟教程上面写的兼容
transform的前缀有四种：有-ms-
transform-origin: top center;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
animation @keyframes 的兼容前缀有三种：没有-ms-
animation: move 2s linear infinite;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
transition有四种 ：没有-ms-
-webkit-transition: -webkit-transform 0.5s; //transition 兼容ios 设置-webkit-transform
-moz-transition: transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
------- 他们唯一的区别就是有没有 -ms前缀的兼容 其他三个兼容前缀都是有的。--------
html:
<div class="card-div" v-for="(item, index) in sunCardList" :key="index">
<img class="front" :class="{ frontHover: isTurnFront }" src="../images/front.png" />
<div class="back" :class="{ backHover: isTurnBack }">
<img :src="item.imgUrl" />
</div>
</div>
css：
.card-div{
position: absolute;
width: 121px;
height: 198px;
top: 17px;
left: 12px;
transform: perspective(1000); //父元素设置该属性
.front,.back{
width: 121px;
height: 198px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; //-webkit-transform-style 为css兼容
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
// transition: all 0.5s;
-webkit-transition: -webkit-transform 0.5s; //transition 兼容ios 设置-webkit-transform
-moz-transition: transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
position: absolute;
top: 0;
left: 0;
}
// 封面
.front {
-ms-transform: rotateY(0deg); //transform的兼容各个平台
-webkit-transform:rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-o-transform:rotateY(0deg);
z-index: 2;
}
// 内容icon
.back {
-ms-transform: rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-o-transform:rotateY(-180deg);
z-index: 1;
position: absolute;
top: 0;
left: 0;
img{
width: 121px;
height: 198px;
}
}
.frontHover {
// transform: rotateY(180deg);
// -webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-o-transform:rotateY(180deg);
}
.backHover {
-ms-transform: rotateY(0deg);
-webkit-transform:rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-o-transform:rotateY(0deg);
}
}
