卡片翻转动画 transition transform的兼容

先看下菜鸟教程上面写的兼容

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 设置-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>

html

---

css：

scss

.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);

}

}