您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

仅使用CSS进行视差滚动?

仅使用CSS进行视差滚动?

请注意,浏览器前缀,后备等未得到解决。标/* e.g. */有的CSS值可以由设计人员决定是否更改。

在这里看到我的[叉子]

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

对KitKat的回答进行了较小的修正:似乎不需要transform-style:preserve-3d(至少在Chrome中是这样),并且效果删除它,视差就会失败。

CSS 2022/1/1 18:17:03 有448人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶