体验链接: https://znasr.gitee.io/mywebsite
<template>
<div class="buttonAni">
<div class="display-flex justify">
<div class="button pointer" @click="buttonAction">
<div :class="['wrapper', { clicked }]">
<div class="front">Click</div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back">Thank You!</div>
</div>
</div>
<div class="button pointer" @click="buttonAction1">
<div :class="['wrapper', { ani1 }]">
<div class="front">Click</div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back">Thank You!</div>
</div>
</div>
</div>
<div class="display-flex justify">
<div class="button pointer" @click="ani2 = !ani2">
<div :class="['wrapper', { ani2 }]">
<div class="front">Click</div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back">Thank You!</div>
</div>
</div>
<div class="button pointer" @click="ani3 = !ani3">
<div :class="['wrapper', { ani3 }]">
<div class="front">Click</div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back back4">Thank You!</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
clicked: false,
ani1: false,
ani2: false,
ani3: false
};
},
created() {},
methods: {
buttonAction1() {
this.ani1 = !this.ani1;
},
buttonAction() {
this.clicked = !this.clicked;
}
},
components: {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/variables.scss';
.buttonAni {
box-shadow: $shadow;
background: #fff;
height: 300px;
padding: 20px;
}
.button {
margin-bottom: 10px;
.wrapper {
font-weight: 700;
font-size: 24px;
color: #fff;
display: flex;
position: relative;
transform-style: preserve-3d;
text-align: center;
border-radius: 6px;
transition: all 0.4s;
// transform: rotateX(-30deg) rotateY(30deg);
width: 160px;
height: 60px;
line-height: 60px;
> div {
position: absolute;
height: 100%;
z-index: 98;
}
.front {
width: 100%;
background: #1f8fff;
z-index: 99;
}
.left {
left: 0;
transform-origin: center left;
transform: rotateY(90deg);
}
.left,
.right {
width: 20px;
background-color: #1b6dbf;
}
.right {
transform-origin: center right;
transform: rotateY(-90deg);
right: 0;
}
.top {
top: 0;
left: 0;
width: 100%;
height: 20px;
transform-origin: center top;
transform: rotateX(-90deg);
background-color: #1b6dbf;
}
.bottom {
bottom: 0;
width: 100%;
height: 20px;
transform-origin: center bottom;
transform: rotateX(90deg);
background-color: #1b6dbf;
}
.back {
z-index: 99;
width: 100%;
background-color: #1f8fff;
left: 0;
top: 0;
transform: translateZ(-20px) rotateY(180deg);
}
.back4 {
background: hsl(147, 50%, 47%);
}
}
.clicked {
transform: rotateY(180deg);
}
.ani1 {
transform: rotateX(-180deg) rotateZ(-180deg);
}
.ani2 {
transform: rotateX(360deg);
}
.ani3 {
transform: rotateX(180deg) rotateZ(540deg);
}
}
</style>