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

所谓活得真实，就是真诚地回应当下的需求。 ---罗伯特·戴博德-

预览

代码

<template>
    <view class="content">
        <view class="card rotated">
            <!-- 正面内容 -->
            <view class="card-contents card-front">
                <view class="card-depth">
                    <view class="card-layout">
                        <!-- 右边文案 -->
                        <view class="card-text">
                            <view class="card-text-title">精彩内容</view>
                            <view class="card-text-item">扫码关注公众号</view>
                            <view class="card-text-item">获取更多优质资源</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 背面内容 -->
            <view class="card-contents card-back">
                <view class="card-depth">
                    <view class="card-layout">
                        <!-- 左边二维码 -->
                        <view class="card-img">
                            <image class="all-img" src="/static/logo.png" mode="aspectFit"></image>
                        </view>
                        <!-- 右边文案 -->
                        <view class="card-text">
                            <view class="card-text-title">公众号二维码</view>
                            <button class="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>

源码下载

https://www.123865.com/s/SmZtVv-7ucgh