- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用关键帧和变换的简单动画,特别是 rotateX
和 rotateZ
。动画效果如我所料(至少在 Chrome 中,还没有尝试过其他动画)。
现在我已经可以正常工作了,如果动画元素超出其父元素,我想隐藏它们。我将普通的 overflow: hidden;
放在父级上。
然后 rotateX
就停止渲染了。 rotateZ
按预期继续。奇怪的是,看起来该元素在检查时继续变换,但子元素仅遵循 rotateZ
。
@keyframes stir {
0% {
transform: rotateX(0deg) rotateZ(-25deg);
}
25% {
transform: rotateX(3deg) rotateZ(0deg);
}
50% {
transform: rotateX(0deg) rotateZ(25deg);
}
75% {
transform: rotateX(-3deg) rotateZ(0deg);
}
100% {
transform: rotateX(0deg) rotateZ(-25deg);
}
}
* {
box-sizing: border-box;
}
.mixing {
position: relative;
width: 80px;
padding-top: 50px;
margin: 50px auto;
}
.mixing .rim,
.mixing .rimb {
width: 80px;
height: 20px;
border: 2px solid #000;
border-radius: 40px / 10px;
background: #fff;
position: relative;
z-index: 5;
}
.mixing .rimb {
z-index: 3;
}
.mixing .sides {
position: relative;
background: #fff;
height: 8px;
width: 100%;
margin: -18px 0 0;
border-left: 2px solid #000;
border-right: 2px solid #000;
top: 10px;
z-index: 4;
}
.mixing .bowl {
width: 70px;
height: 40px;
margin: -16px auto 0;
border: 2px solid #000;
background: #fff;
border-radius: 0 0 30px 30px / 0 0 40px 40px;
}
.mixing .spoon-box {
width: 120px;
height: 70px;
border-radius: 0 0 60px 60px / 0 0 20px 20px;
position: absolute;
top: -2px;
left: -20px;
z-index: 10;
perspective: 25px;
transform-style: preserve-3d;
}
.mixing .spoon {
position: absolute;
left: 50%;
margin-left: -9px;
bottom: -50px;
transform-origin: center bottom;
animation: stir 2s infinite;
animation-timing-function: linear;
}
.mixing .spoon .stick {
height: 55px;
width: 8px;
border: 2px solid #000;
border-radius: 3px 3px 0 0;
border-width: 2px 2px 0px;
background: #fff;
margin: 8px 5px -4px;
position: relative;
z-index: 2;
}
.mixing .spoon .cup {
position: relative;
height: 22px;
width: 18px;
margin-bottom: 40px;
border: 2px solid #000;
background: #fff;
border-radius: 9px / 11px;
}
.broken .spoon-box {
overflow: hidden;
}
<div class="mixing">
<div class="rim"></div>
<div class="sides"></div>
<div class="rimb"></div>
<div class="bowl"></div>
<div class="spoon-box">
<div class="spoon">
<div class="stick"></div>
<div class="cup"></div>
</div>
</div>
</div>
<div class="mixing broken">
<div class="rim"></div>
<div class="sides"></div>
<div class="rimb"></div>
<div class="bowl"></div>
<div class="spoon-box">
<div class="spoon">
<div class="stick"></div>
<div class="cup"></div>
</div>
</div>
</div>
最佳答案
您是否考虑过使用 clip-path css 规则而不是 overflow: hidden
?在对最新的 Firefox 和 Chrome 进行简短测试后,您的 rotateZ
未应用的问题似乎已解决。作为一个不错的奖励,您可以更具体地裁剪,因此要匹配碗的形状,您可以使用 clip-path: ellipse(...)
,如下图所示:
但是,请注意,IE and Edge 不支持 clip-path
.
修改后的例子可以在这个forked codepen中找到或者在下面的代码片段中:
@keyframes stir {
0% {
transform: rotateX(0deg) rotateZ(-25deg);
}
25% {
transform: rotateX(3deg) rotateZ(0deg);
}
50% {
transform: rotateX(0deg) rotateZ(25deg);
}
75% {
transform: rotateX(-3deg) rotateZ(0deg);
}
100% {
transform: rotateX(0deg) rotateZ(-25deg);
}
}
* {
box-sizing: border-box;
}
.mixing {
position: relative;
width: 80px;
padding-top: 50px;
margin: 50px auto;
}
.mixing .rim,
.mixing .rimb {
width: 80px;
height: 20px;
border: 2px solid #000;
border-radius: 40px / 10px;
background: #fff;
position: relative;
z-index: 5;
}
.mixing .rimb {
z-index: 3;
}
.mixing .sides {
position: relative;
background: #fff;
height: 8px;
width: 100%;
margin: -18px 0 0;
border-left: 2px solid #000;
border-right: 2px solid #000;
top: 10px;
z-index: 4;
}
.mixing .bowl {
width: 70px;
height: 40px;
margin: -16px auto 0;
border: 2px solid #000;
background: #fff;
border-radius: 0 0 30px 30px / 0 0 40px 40px;
}
.mixing .spoon-box {
width: 120px;
height: 70px;
border-radius: 0 0 60px 60px / 0 0 20px 20px;
position: absolute;
top: -2px;
left: -20px;
z-index: 10;
perspective: 25px;
transform-style: preserve-3d;
}
.mixing .spoon {
position: absolute;
left: 50%;
margin-left: -9px;
bottom: -50px;
transform-origin: center bottom;
animation: stir 2s infinite;
animation-timing-function: linear;
}
.mixing .spoon .stick {
height: 55px;
width: 8px;
border: 2px solid #000;
border-radius: 3px 3px 0 0;
border-width: 2px 2px 0px;
background: #fff;
margin: 8px 5px -4px;
position: relative;
z-index: 2;
}
.mixing .spoon .cup {
position: relative;
height: 22px;
width: 18px;
margin-bottom: 40px;
border: 2px solid #000;
background: #fff;
border-radius: 9px / 11px;
}
.broken .spoon-box {
transform-style: preserve-3d;
clip-path: ellipse(80px 49px at 60px 22px);
}
<div class="mixing">
<div class="rim"></div>
<div class="sides"></div>
<div class="rimb"></div>
<div class="bowl"></div>
<div class="spoon-box">
<div class="spoon">
<div class="stick"></div>
<div class="cup"></div>
</div>
</div>
</div>
<div class="mixing broken">
<div class="rim"></div>
<div class="sides"></div>
<div class="rimb"></div>
<div class="bowl"></div>
<div class="spoon-box">
<div class="spoon">
<div class="stick"></div>
<div class="cup"></div>
</div>
</div>
</div>
关于css - RotateX 停止并 overflow hidden ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54853899/
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下,我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲,这是那个包含标题,以及转到其他窗口和内容的按钮... 所以问题
我有一个 Azure WebJob,它在一个非常简单的应用服务标准:1 Small(计划)上运行。 现在,我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时,我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后,XCod
我刚刚下载了android开放源代码项目,并尝试使用make来构建它,我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
我以前从未制作过 makefile,但我们已经收到了这个,但是,如果我尝试运行它,它只会说, missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
好吧,这段代码非常基本。用户将答案输入文本框,如果等于“第一+第二”,他们就得到一分。然后,他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了,函数“doCalculation”将再次运行,他
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时,我的 viewController 出现问题。 有什么方法可以停止该
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc,swc 将作为库在 flashdevlop 中使用。 一
我在线程中有一个连接,因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
你好,我做了一个 php 套接字服务器来从 plc 获取数据,plc 被配置为 tcp 套接字客户端。 我有一个严重的问题,如果本地网络出现故障,似乎功能 socket_accept 停止,plc 无
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。 请帮助获得正确的函数或方法来停止 setTimeout 函数。 我一直在尝试
我正在运行一个多项目SBT(v0.13)构建,并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。 当前的行为是,当某项无法在子项目中进行编译时,构建将继续(以编译所有其他子项目)。 一旦
我有播放.wav文件中声音的代码,但是我无法停止播放歌曲,甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲,所以这是一个问题。这是我如何播放wav的代码: public class EasySo
我正在寻找一种解决方案,该如何控制从JSF应用程序播放音频文件。 我不需要完整的解决方案,只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。 我尝试搜索过去的问题,但没有成功。 我
我已经在test.ps1中编写了以下函数,在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
我必须设置一个 10 分钟的计时器,它会重定向到主屏幕。此外,它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
我正在制作一个聊天应用程序,功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时,“自动播放”效果很好。因此,现在我
我基本上希望页面能够接受用户输入的时间(以秒为单位)。 之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮,以便用户可以从头开始倒计时。 这是我到目前为止得到的:
我需要停止 $.each 循环,加载图像,然后继续循环。我有 Canvas ,可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在,当我尝试从数组加载对象时,存在一个问题:由于尺寸不同,并且它们
我是一名优秀的程序员,十分优秀!