uniapp 通过Y轴翻转实现打卡按钮

CV搬运专家

于 2022-03-27 09:29:38 发布

阅读量848

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS uniapp 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46636430/article/details/123768182

通过动态改变 transform 属性实现翻转动画

perspective 属性：定义 3D 元素距视图的距离，查看 3D 元素的视图
（上图是加了perspective 属性，有明显的空间感）
backface-visibility 属性：定义当元素不面向屏幕时是否可见
通过动态绑定 style 改变 transform rotate旋转角度

<template>
	<view>
		<!-- 打卡按钮 -->
		<view class="c_clock">
			<view class="clock_time" @click="daily_clock" :style="{transform: transform_front}">
				<text>每日打卡</text>
			</view>
			<view class="clock_time_over" :style="{transform: transform_after}">
				<text>已打卡</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				transform_front: