- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个用 css 创建的立方体的等距网格,但我遇到了轮廓问题。
这是我想要实现的目标: cube design但这是我到目前为止所得到的:
html cube我尝试了一些常用的技巧,例如使用一些 translateZ 和背面可见性,但无济于事。
我的 CSS 看起来像这样:
.立方体{
transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;
div {
position: absolute;
transition: background-position ease 7s;
backface-visibility: hidden;
&:first-child {
transform-origin: center top;
width: 100%;
height:100%;
transform: rotateX(-90deg);
top: 100%;
}
&:nth-child(2) {
transform-origin: left center;
width: 100%;
height: 100%;
left: 100%;
transform: rotateY(90deg);
}
}
任何想法将不胜感激。
最佳答案
这里的技巧是让立方体的面重叠,并使用 background-blend-mode
CSS 属性让它们相互混合。这会导致立方体相互融合并摆脱奇怪的边界。
此处的工作代码笔链接:https://codepen.io/anon/pen/LXzWjJ
您可能需要稍微尝试一下转换和维度以获得您想要的确切结果。
这不是最好的解决方案,但似乎可行。
希望这对您有所帮助!
关于html - CSS Transforms 给 div 一个轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53366301/
我有一个不规则形状的元素(比方说图标)。 我想要围绕它的某种轮廓,以符合特定颜色的形状。此轮廓的颜色必须均匀地围绕形状,即与形状各处的距离相同,并且没有颜色渐变。 我发现使用的是 css 选项 fil
这部分代码我总是出错 &contours = ((contours.h_next) -> h_next); contours.h_next = ((contours.h_next) -> h_next
我通过 css (:after) 创建了 3 个圆圈,使用一些背景颜色,边框看起来不规则。有什么解决办法吗? 在这里您可以看到问题:https://flowersliving.com/cpt_01/a
使用这个: background: -moz-linear-gradient(315deg, transparent 10px, black 10px); 如何在不使用 border 的情况下围绕它创
我想计算二元 NxM 矩阵中某个形状周围的凸包。凸包算法需要一个坐标列表,所以我采用 numpy.argwhere(im) 来获得所有形状点坐标。然而,这些点中的大多数对凸包没有贡献(它们位于形状的内
如何删除从下拉菜单中选择元素时显示的虚线边框/轮廓? 您可以看到显示了虚线边框/轮廓,我想删除它(在 Firefox 中截取的屏幕截图)。 尝试下面的解决方案并没有删除它: select:focus,
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a min
我正在使用 Qt4 GraphicsView 框架绘制一些多边形,并且允许用户放大和缩小绘图。我希望多边形随着用户在 View 中更改缩放级别(比例)而变得越来越小,但是有没有办法使轮廓厚度始终保持不
我在 C# 中有一个 Vector3 点列表,我需要计算这些点的凹轮廓。确实有很多引用资料,尤其是 -convex- 分辨率(我已经成功实现了,多亏了 graham 的算法), 但是,由于我现在需要有
注: r 中的解决方案, python , java ,或者如果需要,c++或 c#是需要的。 我正在尝试根据运输时间绘制轮廓。更清楚地说,我想将具有相似旅行时间(比如说 10 分钟间隔)的点聚集到特
假设我在图像上找到了轮廓。在图像 2 上找到此轮廓位置的最佳方法是什么? 我看到两个选项:要么我用白线绘制轮廓并匹配图像 2 上的图像,要么我以某种方式(这甚至可能吗?)直接匹配图像 2 上的轮廓。
我一直在研究细菌的图像,希望从图像中获取细菌的数量,还需要根据特定的形状和大小对细菌进行分类。 我正在使用opencv python。现在,我使用轮廓法。 contours,hierarchy
我无法区分以下两个轮廓。 cv2.contourArea两者的值相同。在Python中有什么功能可以区分它们吗? 最佳答案 要区分填充轮廓和未填充轮廓,可以在使用 cv2.findContours 查
是否可以根据 Activity 配置文件的某些表达式来注册bean前任。 @Profile(!prod) @Profile(name!="test") 我有一种情况,我需要根据许多不同的条件配
我有一个由多个 CAShapeLayer 组成的 3D 相似图形对象。必须抚摸所有形状(天花板和墙壁)。有些形状共享一条边 - 这似乎是问题的根源。 然而,轮廓似乎是围绕另一个形状的现有轮廓绘制的。所
有谁知道,是否可以在用户使用顺序导航(TAB 按钮)时在输入元素周围显示轮廓,并在用户用鼠标单击此输入元素时隐藏轮廓?有没有人实现过这种行为? 我在 CSS 文件中的 :focus 选择器上使用这个属
这是我在 StackOverflow 上的第一个问题,所以我会尝试以正确的方式格式化它。 基本上,我有一个带有边框和轮廓的 div。悬停时,div 也会有一个阴影,当然,它应该在轮廓之外。这适用于所有
我在 Opencv 2.9 (C++) 中使用 findContours。我得到的是一个 vector> contours,它描述了我的轮廓。假设我有一个矩形,其轮廓存储在 vector 中。接下来我
我有一个 div,它有附加的子 div,定位在父 div 之外。 我希望父 div 有一个轮廓 onclick,但轮廓延伸到子 div 周围。 有没有办法让轮廓完全围绕父 div。 我不能使用边框,因
我正在尝试在彩色图标周围设置实线边框。 应该足够直截了当,显然它适用于字形,但我无法让它适用于 我试过... // like this fiddle: http://jsfiddle.net/9s
我是一名优秀的程序员,十分优秀!