體驗鏈接：???????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>

總結(jié)

以上是生活随笔為你收集整理的多款3d 立体按钮点击特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。