朋友对我图省事用的 animate.css flipInX 效果不满意,软磨硬泡非要我改成 wordle 原版那种整个翻过来的。于是我就想办法实现了一把,比想象的稍微复杂一些,难点在于我不知道 transform-style: preserve-3d
这个属性。没有这个属性,正反两个图层就被压在一个平面里,怎么翻转都是上面那个图层显示出来。
我用来调试的代码实现请点 这里,为了方便调试,我这次没用 codepen,用的 Vue SFC Playground,效果挺好,尤其是适合不熟悉属性时一边试一边写。不知道 codepen 是否支持这种玩法。
实现的代码与之类似:
<template lang="pug">
.game-item
.face G
.face G
</template>
<style lang="stylus">
.game-item
aspect-ratio 1
position relative
// 这个样式很重要,没有它就没有背面一说
transform-style: preserve-3d;
user-select none
.face
position absolute
top 0
left 0
width 100%
height 100%
display flex
justify-content center
align-items center
&:first-child
// 把第一层稍微提高一点点,不能太多,不然旋转效果不好看
transform translateZ(0.1px)
&:last-child
// 背面提前翻转 180 度,这样转过来才是对的
transform rotateX(180deg)
@keyframes flip
from
transform: perspective(400px) rotate3d(1, 0, 0, 0)
to
transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
.flip
animation-name: flip
</style>
这种效果平时还是找时间写上一两次,CSS 属性是知识性内容,没办法凭经验推出来,平时得注意积累。
发表回复