- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
过渡和转换似乎在 firefox 中对我来说工作不正常,我为所有内容添加了 -moz- 前缀,但它似乎对使其更具功能性的影响为零。我有一本书,悬停在上面时会打开,但在 fire fox 中,这本书不会一直打开,而是在鼠标移开之前关闭。书中未使用的过渡和变换似乎有效,似乎书中的那些才是问题所在。至于 Microsoft Edge,它可以正常工作,但背景图像、伪元素之前的 abd 和我在上面的 div 没有显示。图书封面在 Microsoft Edge 上只是空白。有更多经验的人了解这里的问题吗?它在 chrome 中运行良好,但在 firefox 中运行不正常。
https://jsfiddle.net/ma2u65o0/
//book css snippet
.book-front{
position: relative;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-origin: left;
-moz-transform-origin: left;
transition: transform 1s ease-in-out 0s;
-moz-transition: transform 1s ease-in-out 0s;
box-shadow: 0px 3px 5px 2px rgba(0,0,0,.5);
perspective: 400px;
perspective-origin: -200px;
}
.front-of-book-front{
background-image: url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 47%;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
最佳答案
将 backface-visibility:hidden
添加到您的 .front-of-book-front
使其在打开和关闭操作后透明。
此外,我建议您使用 3d 变换进行硬件加速。
更新后的 CSS:
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 100px;
height: 160px;
position: relative;
perspective: 800px;
}
.book{
margin: 52px auto;
transition: transform 1s ease-in-out 0s;
}
.book-front{
position: relative;
transform-style: preserve-3d;
transform-origin: left;
transition: transform 1s ease-in-out 0s;
box-shadow: 0px 3px 5px 2px rgba(0,0,0,.5);
perspective: 400px;
perspective-origin: -200px;
}
.front-of-book-front{
background-image: url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 47%;
}
.front-of-book-front:before{
content: "Seraph Chronicles: Evangelion";
text-shadow: 2px 2px 1px rgba(0,0,0,.5);
font-size: .5em;
line-height: 15px;
color: white;
width: 119px;
height: 15px;
background-color: rgba(255,165,0,.5);
position: absolute;
text-align: center;
transform: translate3d(8px,93px,0) rotateZ(90deg);
}
.front-of-book-front:after{
content: "";
width: 75px;
height: 12px;
background-color: rgba(255,165,0,.5);
position: absolute;
transform: translate3d(0px,19px,0);
}
.bar{
width: 80px;
height: 8px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotateZ(90deg) translate3d(36px,-45px,0);
}
.bar p{
padding: 2px 3px 0 0 ;
display: block;
}
.back-of-book-front{
backface-visibility: hidden;
background-color: rgb(240,234,214);
transform: rotateY(180deg);
position: absolute;
top: 0;
}
.book:hover .book-front {
transform: rotateY(-180deg);
}
.book:hover{
transform: rotateZ(10deg);
}
.book-back{
position: absolute;
top:0;
background-color: rgb(240,234,214);
z-index: -1;
box-shadow: 3px 3px 5px 0 rgba(0,0,0,.5);
text-align: justify;
}
.book-back p{
font-size: .3rem;
margin: 2.9em 1.9em;
}
@media screen and (min-wdith:400px){
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 113px;
height: 180px;
}
.front-of-book-front:before{
width: 133px;
height: 17px;
transform: translate3d(8px,105px,0) rotateZ(90deg);
}
.front-of-book-front:after{
width: 83px;
height: 14px;
transform: translate3d(0,21px,0);
}
.bar{
width: 95px;
height: 10px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotateZ(90deg) translate3d(42px,-45px,0);
}
.book-back p{
font-size: .4rem;
margin: 2.9em 1.9em;
}
.book-side{
width: 176px;
height: 10px;
top:-3px;
}
}
@media screen and (min-width:860px){
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 200px;
height: 320px;
}
.front-of-book-front{
perspective: 200px;
}
.front-of-book-front:before{
width: 234px;
height: 37px;
transform: translate3d(11px,185px,0) rotateZ(90deg);
font-size: 1em;
line-height: 37px;
}
.front-of-book-front:after{
width: 146px;
height: 26px;
transform: translate3d(0,32px,0);
}
.bar{
width: 172px;
height: 23px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotateZ(90deg) translate3d(74px,-82px,0);
font-size: .7em;
}
.bar p{
display: block;
padding: 12px 5px 0 0;
}
.book-side{
width: 312px;
height: 10px;
top:-1px;
left: -5px;
}
.book-back p{
font-size: .7em;
margin: 3.3em 2.3em;
}
关于css - transitioned book 在 firefox 和 microsoft edge 中不起作用 - 为什么以及如何修复它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44652176/
我正在为 MIT OCW 类(class)做一些事情,它要求编写一个“图书馆”类(class)。现在我有这个: #include using namespace std; class Book{
ExcelWorkbook = py.load_workbook(FilePath) writer = pd.ExcelWriter(FilePath, engine = 'openpyxl') wr
我是 C++ 的学习者,我对构造函数和析构函数感兴趣。我编译了下面的代码,它返回了对 Book::~Book() 错误的 undefined reference 。但是当我注释掉析构函数时,它工作正常
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在使用 Google Books API在我的 Angular 项目中。我有书籍的不同静态类别的列表。单击特定类别时,我想从 Google Books API 获取搜索类别的书籍。 Google
我不知道如何做一些应该非常简单的事情。 我有两个实体:书架和书。一个书架可以放一本或多本书。这些实体中的每一个都有一个相应的 JpaRepository 暴露为使用 Spring Data Rest
我需要从 Booking.com 系统获取特定住宿的评分值。是否有 API 可以提供总体评分等信息以及系统中列出的属性的其他有用信息? 最佳答案 如果有人有同样的问题,我会简短地回答 - bookin
我需要从 Booking.com 系统获取特定住宿的评分值。是否有 API 可以提供总体评分等信息以及系统中列出的属性的其他有用信息? 最佳答案 如果有人有同样的问题,我会简短地回答 - bookin
有没有一种简单的方法可以使用 Google Book API 从 ISBN 获取 JSON 格式的图书封面? 最佳答案 您可以使用 isbn: 查询,如下所示: https://www.googlea
我是新手,所以这只是一个问题,我想知道哪个更有效,哪个提供最佳时间复杂度。 没有。 1 export default class BookingTabs extends Component {
在我一直在开发的应用程序中,我遇到了像 /books/:slug, :to => 'books#show', slug:/.*?/ 这样的路由。我很好奇这部分的作用 slug:/.*?/ ? 最佳答案
刚从使用 Books 应用程序示例的 Djangobook 教程中学习时,您通过多对多关系将 Book 与 Author 相关,并将 Book 与 Publisher 相关。您可以使用 p.book_
我刚启动 xcode 7 稳定版。在我当前的项目中,我正在从 web 服务下载图像。在 xcode 6.4 中工作正常。现在它没有显示任何图像并在日志中显示警告 -canOpenURL: failed
我在名为 DetailOrder 和 Book 的两个类中遇到映射问题。 问题如下所示。 Initial SessionFactory creation failed. org.hibernate.A
我正在尝试制作 CRUD+spring 应用程序来创建/删除/更新书籍。一切正常,但从数据库中搜索一本书。请帮忙。 @Controller public class BookController {
我完全是使用 CakePhp 的新手。我已经解决了一些问题,但我又对这个基本问题了如指掌。你能帮我解决这个问题吗? Notice (8): Undefined variable: books [APP
我在网上冲浪时遇到了一对多关系的问题,并且无法修复。我仔细检查了他们引用的 @Entity 声明 import javax.persistence.Entity; 之前我仅尝试单向 ManyToOne
刚开始在我的学校学习 node js。他们给了我们这个半完成的任务,我需要让下一个和上一个按钮起作用。但是,当我运行 index.html 时,控制台出现了一些错误。错误是: “获取 API 无法加载
我创建了一个网站,访问者可以使用turnjs 浏览一本书。我的页面是双页的 jpg,我希望它们能够动态加载。 代码如下: var flipbook = $('.flipbook'); flipboo
void displayInventory(const struct Book book[], const int size) { Idk y book[] 在 visual studio 中遇到
我是一名优秀的程序员,十分优秀!