JS
data: {
isInFront: true
}
...
flipCard: function(){
this.setData({
isInFront: !this.data.isInFront
})
}
WXSS
.container-body-box-item{
width: 200px;
height: 200px;
transform:perspective(800px) rotateY(0deg);
transition:1s;
transform-style:preserve-3d;
}
.container-body-box-item.show-back{
transform:perspective(800px) rotateY(-180deg);
}
.front, .back{
width: 100%;
height: 100%;
left:0;
top: 0;
color: -sharpfff;
}
.front{
background: pink;
position: absolute;
transform:translateZ(1px);
}
.back{
background: yellowgreen;
transform:translateZ(-1px) rotateY(180deg);
}WXML
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="container-body-box-item {{isInFront?"":"show-back"}}" bindtap="flipCard">
<view class="front">
<view></view>
</view>
<view class="back">
<view></view>
</view>
</view>
</block> the block container-body-box-item is looped out to control the flip effect alone. The problem I encountered is that I don"t know how to control it alone. After studying it for a long time, Mini Program seems to be unable to splice the variable name. How can I identify which block I clicked on and let him flip it?