uni-app 3D卡片翻转公众号案例

<template>    <viewclass="content">        <viewclass="card rotated">            <!-- 正面内容 -->            <viewclass="card-contents card-front">                <viewclass="card-depth">                    <viewclass="card-layout">                        <!-- 右边文案 -->                        <viewclass="card-text">                            <viewclass="card-text-title">精彩内容</view>                            <viewclass="card-text-item">扫码关注公众号</view>                            <viewclass="card-text-item">获取更多优质资源</view>                        </view>                    </view>                </view>            </view>            <!-- 背面内容 -->            <viewclass="card-contents card-back">                <viewclass="card-depth">                    <viewclass="card-layout">                        <!-- 左边二维码 -->                        <viewclass="card-img">                            <imageclass="all-img"src="/static/logo.png"mode="aspectFit"></image>                        </view>                        <!-- 右边文案 -->                        <viewclass="card-text">                            <viewclass="card-text-title">公众号二维码</view>                            <buttonclass="custom-button margin-top">                                3D卡片翻转公众号案例                            </button>                        </view>                    </view>                </view>            </view>        </view>    </view></template><script>export default {    data() {        return {            title: 'Hello'        }    },    onLoad() {    },    methods: {}}</script><style>.all-img {    height: 100%;    width: 100%;}.card {    border-radius: 25rpx;    box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, .02);    height: 300rpx;    margin: 0 auto;    position: relative;    transform-style: preserve-3d;    transition: all 1s ease;    /* width: 800rpx; */    width: 94%;}.card-layout {    display: flex;    align-items: center;    justify-content: space-around;}.card-depth {    perspective: inherit;    transform: translateZ(100px) scale(.98);}.card-contents {    align-items: center;    backface-visibility: hidden;    border-radius: 30rpx;    display: flex;    flex-direction: column;    height: 100%;    justify-content: center;    left: 0;    position: absolute;    text-align: center;    top: 0;    width: 100%;}.card-front {    transform-style: preserve-3d;}.card-back {    transform: rotateY(180deg);    transform-style: preserve-3d;}.card-back,.card-front {    background: linear-gradient(to top left, #2f3036, #2f3036);}.card-img {    border-radius: 30rpx;    box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, .08);    width: 220rpx;    height: 220rpx;}.card-text {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    flex: 1;    padding-left: 50rpx;}.rotated {    animation: dd-rotation .8s ease-in-out 1s 1 forwards;}@keyframes dd-rotation {    from {        transform: rotateY(0deg);    }    to {        transform: rotateY(-180deg);    }}@-webkit-keyframes dd-rotation {    from {        transform: rotateY(0deg);    }    to {        transform: rotateY(-180deg);    }}/* 文本样式 */.card-text-title {    font-size: 36rpx;    color: #ffffff;    font-weight: bold;}.margin-top {    margin-top: 40rpx;}.margin-top-sm {    margin-top: 20rpx;}.card-text-item {    font-size: 28rpx;    color: #ffffff;    margin-top: 20rpx;}/* 自定义按钮样式 */.custom-button {    background-color: #FFFFFF;    color: #000000;    font-size: 28rpx;    padding: 25rpx 40rpx;    border-radius: 20rpx;    border: none;    width: 100%;    touch-action: manipulation;}</style>