代码
<template>
<div>
<div class="wrapper">
<div class="flipper" style="margin: auto">
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
</div>
</template>
<style scoped >
.wrapper {
perspective: 800px;
margin: 40px;
}
.flipper {
width: 200px;
height: 400px;
perspective-origin: center;
transform-style: preserve-3d;
transition: transform 1s;
}
.flipper:hover {
transform: rotateY(180deg);
}
.front,
.back {
width: 200px;
height: 400px;
font-size: 40px;
color: #fff;
backface-visibility: hidden;
text-align: center;
position: absolute;
}
.front {
background: green;
}
.back {
background: red;
transform: rotateY(-180deg);
}
</style>