3D翻转实例

污斑兔

于 2024-10-16 01:21:29 发布

阅读量352

点赞数 5

文章标签： CSS 前端

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/142967690

版权

3D翻转实例

<div class="letter-top-box">
        <img class="letter-top" src="img/letter-top.png" alt="letter-top" />
        <img class="letter-top-cover" src="img/letter-top-cover.png" alt="letter-top" />
      </div>

.letter-top-box {
        position: absolute;
        top: 6px;
        left: 0;
        width: 100%;
        height: 50%;
        transform-origin: 0 0;
        transform-style: preserve-3d;
        transition: 1.2s linear transform;
        z-index: 4;
      }

.letter-top-box .letter-top-cover,
      .letter-top-box .letter-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 160px;
        backface-visibility: hidden;
        transform-style: preserve-3d;
      }