卡牌翻转

Posted on

前言

卡牌翻转这个功能其实是在网上搜索到的，挑选了个比较好的修改使用了，其中学到了几个css3属性

涉及CSS3属性

transform

transform我经常使用，但是基本上都是用在把不定宽高的元素进行居中的效果上，即transform: translate(-50%,-50%)，它还有很多其他细节的部分，今天来学习总结：

W3school上面的定义是： transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转，缩放，移动或倾斜transform之W3school链接

上面提到的的transform: translate(-50%,-50%)用到的是2D移动，前一篇火箭打分的博客中用到了translate3d(x,y,z)3D移动，缩放和倾斜暂时都没用过，本次的需求用到了3D旋转

语法： transform: none|transform-functions;，默认值是none，没有继承性，js语法：object.style.transform='translate3d(x,y,z)'

属性值移动translate：2D ——> translate(x,y)； 3D ——> translate3d(x,y,z)； 同时存在单独移动一个轴线的属性值translateX(x)，translateY(y)，translateZ(z)（3D转换情况下）

属性值缩放scale：2D ——> scale(x,y)； 3D ——> scale(x,y,z)； 同时存在单独缩放一个轴线的属性值scaleX(x)，scaleY(y)，scaleZ(Z)（3D转换情况下）

属性值旋转rotate：2D ——> rotate(angle)； 3D ——> rotate(x,y,z,angle)； 同时存在单独旋转一个轴线的属性值rotateX(angle)（3D转换情况下），rotateY(angle)（3D转换情况下），rotateZ(angle)（3D转换情况下）

属性值倾斜skew：2D ——> skew(x-angle,y-angle)， 同时存在单独倾斜一个轴线的属性值skewX(angle)，skewY(angle)，没有3D

所以总体来说倾斜skew只有2D，其他都存在3D，但旋转rotate单独旋转一个轴线角度只存在3D转换情况下，移动translate和缩放scale转换Z轴只存在3D转换情况下

属性值matrix在这里先不说，因为涉及到矩阵，情景比较复杂

其它transform-origin被转换元素的位置，即假如是旋转默认以元素中心为基点旋转，此属性就是更改次基点；transform-style在3D空间中如何呈现被嵌套的元素flat不保留3D位置，preserve-3d保留3D位置； perspective元素距离视图的距离，以像素计，设置的是其子元素；perspective-origin规定3D元素的底部位置，必须要与perspective一起使用，同样设置的是其子元素；backface-visibility是否隐藏旋转元素的背面，visible显示，hidden隐藏

以上就是transform基本内容

在卡片翻牌的效果中用到了rotateY,backface-visibility,transform-style

transition

过渡效果transition: property duration timing-function delay;，可以分开设置：transition-property设置过渡效果的CSS属性的名称；transtiion-duration设置完成过渡效果的时间(s或ms)；transition-timing-function过渡效果的速度曲线；transition-delay过渡效果何时开始

卡片翻转需要设置下翻转过程的时间

开发

卡片翻转的思路是，两个充当卡牌背面和正面的元素叠在一起，都设置成隐藏背面，初始时卡牌的正面已经是旋转180度，所以初始化的状态就是卡牌还没翻转，即两个元素背靠背的状态，之后触发翻转并不是更改这两个元素了，是旋转两个元素的父元素180度，这个时候就显示出transform-style的重要性了，需要transform-style:preserve-3d保留两个背靠背元素的3D位置，即保留最开始设置的两个元素背靠背状态

具体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
	<div class="wrapper">
		<div :class="['flip-container',flag?'hover':'']">
			<div class="back"></div>
			<div class="front">front</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				data: {name:'yvonne',job:'前端开发工程师',avatar:'/static/img/avatar.jpg'},
				flag: false
			}
		},
		mounted(){
			const that = this;
			setTimeout(function(){
				that.flag = true;
			},500)
		}
	}
</script>

<style scoped>
	.wrapper{
		height: 440px;
		background-color: #fafafa;
		padding: 50px;
	}
	.flip-container {
		position: relative;
		width: 110px;
		height: 165px;
		margin: 0 auto;
		transform-style: preserve-3d;
		transition: 0.6s;
		perspective: 1000px;
	}
	.flip-container.hover{
		transform: rotateY(180deg);
	}
	.front, .back {
		backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 110px;
		height: 0;
		padding-bottom: 165px;
	}
	.back {
		background: url('/static/img/card.png') no-repeat;
		background-size: cover;
	}
	.front {
		transform: rotateY(180deg);
		border-radius: 4px;
		box-shadow: 0 5px 4px -4px #e5e5e9;
		text-align: center;
		line-height: 165px
	}
</style>

效果：

css3很多属性要慢慢用起来，很多功能还是很强大的，可以自定义很多想要的效果！！！

最后看下项目中的卡片翻转(请忽略个人信息)：