个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个带有 CSS3 透视图的 DIV 元素。 DIV 包含 2 个子 DIV，其中之一在 z 轴上有平移。这应该会导致一个 DIV 在另一个前面，因此后面的那个应该被挡住。
然而，这些 DIV 的可见性似乎是由它们在 HTML 中出现的顺序控制的，而不是由 CSS3 透视图自动处理的。
在下面的代码中，尽管 #div3 在 z 轴上位于 #div2 之后，但它显示在前面，因为它在 HTML 中位于后面。
我知道我可以使用 z-index 属性来明确说明哪个 DIV 应该在前面，但同样，我正在寻找一种更自动化的方法。
<html>
<head>
<style type="text/css">
#div1
{
position: relative;
height: 150px;
width: 200px;
-moz-perspective:150px;
-webkit-perspective:150px;
}
.child
{
padding:50px;
position: absolute;
}
#div2
{
background-color: red;
}
#div3
{
background-color: green;
-moz-transform: translateZ(-50px);
-webkit-transform: translateZ(-50px);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2" class="child">HELLO</div>
<div id="div3" class="child">HELLO</div>
</div>
</body>
</html>
引用:jsFiddle
最佳答案
而不是使用 perspective: 150px; 使用 transform: perspective(150px);。然后，还使用 transform-style: preserve-3d; 使 z 轴可用。
这是一个引用(有一个轮换以帮助查看发生了什么):http://jsfiddle.net/joshnh/4DjLP/
这里是相关的样式:
#div1 {
transform: perspective(150px);
transform-style: preserve-3d;
}
关于CSS3 透视 z 轴可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11641937/
27
4
0
我在 Mac OsX 10.11 上使用 Xcode 7.0.1 (7A1001) 我使用 carthage 0.9.2 通过以下购物车文件下载reactivecocoa github“Reactiv
我正在将一个对象从属性“模型”(我从 Laravel 中的 Blade 属性模型中获得)分配给数据属性模型。后来数据属性模型发生变化，因为它绑定(bind)到表单输入字段。但 Prop “模型”也发生
当我更新数组内对象的属性然后作为组件的 Prop 传递时，在 svelte 中触发 react 性的正确方法是什么？ let items = [{ id: 1, name: 'first'
我是 DRY principle 的坚定拥护者: Every piece of knowledge must have a single, unambiguous, authoritative rep
我正在实现一个需要以下功能的线程: 及时响应终止请求 推送消息 在等待消息时保持对 SendMessage 请求的响应 我对消息泵的初始实现使用了 GetMessage，如下所示: while not
在我的应用程序中，用户获得了一份已到达她的文档列表，并且可以对每个文档执行操作。 文件是分批提交的，当这种情况发生时，列表会增加。这一切都很好，这是预期的行为，但最好有一个按钮“暂停实时数据”，它会忽
我有一个属性为 的数据对象 displaySubtotal 我可以通过以下方式更新该属性的值: data.displaySubtotal = numPad.valueAsAString(); 我的方法
我需要一个垂直 slider 输入。由于内置的 sliderInput 函数无法做到这一点，因此我选择自己实现。根据this thread可以 (I) 使用 CSS 旋转 sliderInput
我正在从自定义用户权限管理系统迁移到 Alanning:roles v2.0 .我有一个非常基本的结构: 基本用户 用户组，每个用户组都有特定的设置。我将它们存储在一个“组”集合中。 管理群组的用户的
Shiny 中的响应式(Reactive)表达式将更改传播到需要去的地方。我们可以使用 isolate 来抑制一些这种行为。 ，但是我们可以抑制基于我们自己的逻辑表达式传播的更改吗？ 我给出的例子是一
是否有(或可能有) react 性 Parsec (或任何其他纯函数式解析器)在 Haskell 中？ 简而言之，我想逐个字符地为解析器提供数据，并获得与我提供的足够多的结果一样多的结果。 或者更简单
HTML(JADE) p#result Lorem ipsum is javascript j s lo 1 2 4 this meteor thismeteor. meteor input.sear
我有一个被导入函数更改的对象。 https://svelte.dev/repl/e934087af1dc4a25a1ee52cf3fd3bbea?version=3.12.1 我想知道如何使我的更改反
我有一个YUV 420半平面格式的图像，其中字节以这种方式存储: [Y1 Y2 ... [U1 V1.... Yk Yk+1...] Uk' Uk'+1] 其中Y平面的大小是UV平面的两倍，并
如何使用 ReactiveCocoa 订阅从 NSMutableDictionary 添加和删除的对象？另外，我想在它发生变化时广播通知。我的猜测是可以使用 RACMulticastConnectio
我正在构建一个带有多个选项卡的应用程序，其中一些选项卡涉及过多的计算，而另一些选项卡的计算速度很快。一个允许用户在 react 性或手动更新之间进行选择的复选框，与“刷新”按钮结合使用，将是理想的选择
我知道您可以在获取集合时使用 reactive: false 关闭 react 性。如何在内容可编辑区域内的集合字段中实现相同的效果？示例: Template.documentPage.events(
我想在 z3 中表示一个哈希函数，比如 SHA(x)。在做了一些研究之后，似乎 z3 不能很好地支持注入(inject)性，所以我不能有像这样的约束(虽然我意识到这并不是严格意义上的碰撞，但作为一种启
我正在解决一个问题，我想在仪表板中将数据显示为图表(通过 perak:c3 )和表格(通过 aslagle:reactive-table )。我的问题是数据是从 MongoDB 中的集合中提取的，它的
我的 ViewModel 中有这个函数，它返回一个信号，但内部 block 不起作用，我尝试添加断点，但它没有中断。这是我的代码。 func executeLoginAPI() -> RACSigna
我是一名优秀的程序员,十分优秀！