css3 实现 卡片翻转效果 （正反面内容不同）

1/ 纯css版本 

参考链接  有小改动，实现的是点击 + 无限翻转（x）

先进行简单说明：

1、最外层是box，点击后添加flipped类。

2、内层分别是card，一面back一面front。

主要去看css：╮(╯▽╰)╭不影响最终结果，但又很规范的都被我删了（搞懂为目的。。）

简单来说，只要两句话：外层给  旋转   套上1秒的过渡。

transition: transform 1s;

添加的类：

.flipped{
	transform: rotateY(180deg);
}

只是把整个旋转了180度而已，如果不过渡的话那就是直接变成反面的字。。。

添加正反卡片，因为两个都要重叠，都要覆盖，所以两个都是占满的绝对定位，正常定位是顺次排布会挤下去。

把后面的隐藏。

    position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;//后面的藏起来, 不然会有小叠加..

但他们在层叠上，还是有先后的关系，单单这样只是把front倒转而以。。。这时候需要

transform-style: preserve-3d; 呈现3d效果。。。。（给父元素）

 

主要代码：

<template>
  <div>
    <text>先做个翻转测试</text>
    <div class="box" @click="toTest"
		:class="this.todo===false?'':'flipped'"
	>
		<div>内辅助文字，可删掉</div>
      <div class="card front">111</div>
      <div class="card back">2222</div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
		todo:false,
	};
  },
  methods: {
	  toTest(){
		  this.todo=!this.todo;
	  }
  },
};
</script>

<style lang="scss" scoped>
.box{
	margin: 50px auto;
    width: 239px;
    height: 334px;
	background-color: green;//辅助颜色~ 
    transform-style: preserve-3d;
    transition: transform 1s;
}
.card{
	//display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;//后面的藏起来, 不然会有小叠加..
	border-radius: 20px;
}
.front{
	background-color: pink;
  	//background-position: -24px -23px;
}
.back{
	transform: rotateY(180deg);
	background-color:blue;
  	//background-position: -287px -23px;
}
.flipped{
	transform: rotateY(180deg);
}
</style>

多少学一下相关的。

目前浏览器都不支持 @keyframes 规则。（。。。。）

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

---------不过。。  感觉根本也没那么严重。好像都还可以，可能是后来都有改进。

但是transition加上keyframes好像打包后失效。先从easy的demo可完成的开始

2/ vue transtion过渡版本