个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我得到了这个 CSS 动画，它可以将一个图像翻转到另一个图像，在我从这个论坛获得有关如何添加供应商前缀以使其在 Safari 中工作的帮助后，这非常棒。不幸的是，它在 Iphone 上仍然不起作用:(
有人知道怎么解决吗？
代码:
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="https://placekitten.com/600/332">
</div>
<div class="back">
<img src="https://placekitten.com/600/331">
</div>
</div>
</div>
</body>
CSS:
@-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container, .front, .back {
width: 600px;
height: 332px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: 1000px;
}
/* front pane, placed above back */
.front {
background: white;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: white;
}
最佳答案
您应该查看并应用所有必需属性的供应商前缀(例如透视、变换样式、过渡)。
您还应该将单位添加到透视属性(例如:-webkit-perspective: 1000px)。
实际上，要防止供应商前缀导致代码过载，请使用 -prefix-free javascript 库。
当您使用-Prefix-free javascript 库时，您不关心供应商前缀。
关于html - CSS 动画(翻转)不适用于 Iphone/Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34005465/
25
4
0
我有一个数据集，我试图在其中探索将变量限制在给定值并将超出的部分滚动到后续间隔的影响。我可以从概念上看到一些方法可以使用 cumsum() 来做到这一点。或类似的，但正在努力了解如何以合乎逻辑的方式实
我正在开发一个使用 iPhone 前置摄像头的应用程序。当使用该相机拍摄图像时，iPhone 会水平扭曲图像。我想将其镜像回来，以便能够保存它并按照在 iPhone 屏幕上看到的方式显示它。 我读了很
这是 HTML // stuff here Order /
我正在使用 Jquery - 是否有一种简单的方法可以在用户滑过 div 时更改它的背景颜色？ 最佳答案 你可以用 CSS 做到这一点: #myDiv:hover { background-color
有谁知道是否可以翻转图像并在其背面显示内容。这就是我的意思:想象一下你手里拿着一张肖像。然后你翻转并查看肖像的背面，背面有文字。我正在寻找类似的东西，单击图像将镜像/翻转到另一侧，上面有文字。不可90
我在翻车方面遇到了一些麻烦..希望你能帮助我! 我正在使用 li 导航，我希望有单独的框链接到不同的页面。这部分很好，可以正常工作。我希望能够将鼠标悬停在框上并让框和链接改变颜色。我可以毫无问题地改变
所以我目前在 Vuejs 中有一个组件，用户可以在其中从他们的本地文件系统中选择一个文件。用户选择图片后，图片会在 div 中预览 codesandbox .出于某种原因，某些图像会自动“翻转”到侧面
我有一个滚动顶部菜单。我正在尝试获取它，以便我的背景图像 (17px x 13px) 悬停在中央。我已经尝试了所有背景 css 属性，但似乎没有任何效果。我是不是用错了方法？ 这是我的 CSS: #n
我以前用过这个效果，一切正常(据我所知)，但就是不行。我错过了什么？ Fiddle here Sprite here 谢谢。 最佳答案 由于您的 Sprite 是水平排列的，因此您需要像这样偏移悬停状
代码后面的代码不起作用，因为重新查找接受字符串作为第一个参数，正则表达式作为第二个参数。 (-> "hello" .toUpperCase (re-find #".$")) 如果我像这
我想使用 CABasicAnimation 翻转 UILabel。动画将永远重复，并将在两个不同值之间更改 UILabel 的文本。 - (void)animateLabel { [self
旋转 WPF 图像非常简单 imgCurrent.LayoutTransform = new RotateTransform(_rotationAngle); 水平和垂直镜像呢？ 机外: In GDI
我需要创建一个动画 - 翻转一个 View 并显示另一个。 当前显示的 View 的宽度慢慢减小到零，之后要显示的 View 的宽度必须从零开始增加。 在此期间，高度从当前显示的高度变为略微降低的高度
我正在尝试找到翻转 Rust 中 boolean 值的最快方法？即 false => true true => false 对于我的应用程序，我不关心 boolean 值的当前值，只关心它被翻转了。对
是否可以翻转 primefaces 中的数据表，以使标题位于左侧而不是顶部？我有下表: 如您所见
我在翻转 View 时遇到了一些问题。我的 View Controller 中有以下代码: - (void)loadFlipsideViewController { ProblemViewFl
我正在使用翻转动画在 View Controller 中的两个 View 之间制作动画。问题是动画发生时背景显示白色空白背景。我想显示黑色背景。 我尝试在 IB 和代码中将主视图的背景颜色设置为黑色。
请考虑下面的代码，并告诉我我做错了什么。 我想在两个 UIView 之间切换。 不知何故，当我从初始 View 翻转时，我只是得到翻转的 View ，没有动画。当我向后翻转时，动画显示得很好。 翻转是
我有一个 NSScrollView，需要在其中显示可变数量的 NSView。我制作了一个自定义 NSView，它的 isFlipped 返回 YES 并将我的 NSView 放入其中，然后将其设置为
我有一个 NSView 的子类，它重新实现了许多鼠标事件函数。例如，在 mouseDown 中从我使用的 NSEvent 获取点: NSEvent *theEvent; // <- argument
我是一名优秀的程序员,十分优秀！