代码分享:翻转小动画

朋友对我图省事用的 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 属性是知识性内容,没办法凭经验推出来,平时得注意积累。

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据