先看下菜鳥教程上面寫的兼容

transfrom兼容的前綴

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兼容的前綴

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

transition有四種 ：沒有-ms-

-webkit-transition: -webkit-transform 0.5s;? //transition?兼容ios 設(shè)置-webkit-transform

-moz-transition: transform 0.5s;

-o-transition: transform 0.5s;

transition: transform 0.5s;

------- 他們唯一的區(qū)別就是有沒有 -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>

html

css：

scss

.card-div{

position: absolute;

width: 121px;

height: 198px;

top: 17px;

left: 12px;

transform: perspective(1000);? ?//父元素設(shè)置該屬性

.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 設(shè)置-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;

}

// 內(nèi)容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);

}

}