小编Hid*_*eto的帖子

我正在尝试在主要内容 div 上而不是整个页面上制作一个以“书籍封面”开头的页面转换。您可以在几秒钟内看到封面，这段时间足以让您一目了然。然后封面应该像任何精装书封面打开一样“打开”，抬起前面的一侧然后翻转出视图，就像放大内页一样，封面超出框架。

我看过很多教程和生成器，似乎有某种翻转的“圣杯”，其中项目在中心的 y 轴上水平翻转，就像翻转卡片一样。我找不到任何东西可以帮助我弄清楚如何从一侧翻到另一侧，就像精装书封面那样。

我无法提供代码片段，因为我真的不知道从哪里开始。我可以从无数教程页面之一加载无数示例代码中的一个，但它只是随机的，毫无意义的动画翻转代码，我对如何自定义以完成我需要的事情零理解，否则我会做它已经而不是在这里。

任何人都可以指出我正确的方向吗？即使您只是指向我一些通用动画翻转代码的教程页面，并简单地告诉我要更改哪些属性才能使其像精装书一样翻转打开，那也是完美的。

我想我可以弄清楚如何在使用延迟加载暂停后触发它，但是如果您有更好的解决方案，那也很受欢迎。

我喜欢外部样式表，并希望能够通过外部表设置任何 SVG 图形的样式。我可以为我的 SVG 徽标声明单色笔触和填充，但我想要渐变填充。我已经尝试了一个视图，但无法正常工作。有人可以帮我弄清楚如何使它工作吗？

考虑到我正在讨论外部代码，而不是inline，我不确定如何放置代码片段，所以这里有一个指向相关 SVG 徽标及其匹配外部样式表的链接。

我试图在 SVG (PNG) 中重新创建的实际徽标：

SVG 标志：http : //www.cafenocturne.com/testpage/images/svg/CafeLogoSVG.svg

样式表：http : //www.cafenocturne.com/testpage/css/CafeLogoSVG.css

有一些注释掉的注释以确保我不会丢失我正在尝试实现的渐变代码，所以我很抱歉 CSS 文件是一团糟。一旦我可以让它正常工作，我就不需要在那里做笔记了。

那么我该如何实现呢？