css - Vue3 @click deos 在使用 -webkit-perspective: 500px 样式的元素内不起作用

Question

我要创建的是 3d Carousel，但是当我添加透视 500px vue click 不起作用。我的代码看起来像这样......

<div class="wrapper">
<div class="stage">
   <div class="h-full w-full" v-for="image in images" :key="image.id" :class="{'hidden box h-full rounded-2xl':true, 'active':active==image.id, 'previous': pre==image.id, 'next': image.id==next}">
        <img :src="image.url" @click="setActive(image.id)" class="h-full rounded-2xl shadow-xl w-full" alt="">
   </div>
</div>
</div>

和 CSS

.wrapper{
background-image: url("../assets/carousel/bg.jpg");
background-size: cover;
height: 100%;
width: 100%;
display: flex;
overflow: hidden;
justify-content: center;
justify-items: center;
justify-self: center;
align-items: center;
-webkit-perspective: 500px;
-webkit-perspective-origin: center;
}
.stage{
-webkit-transform-style: preserve-3d;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
width: 100%;
position: relative;
}
.box{
position: absolute;
height: 100%;
}

当我删除透视图时它工作正常，但我尝试实现 3d 轮播，有什么建议吗？

标签： cssvuejs3