- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我的目标是将这些立方体放在一个网格上,并让它们排成一行,可以拖动和捕捉。我根据 this example 使立方体运行良好,但我没有完全理解某些机制,因此遇到了一些问题。
立方体开始时比旋转后大。要查看此内容,只需单击应用“show-front”类的“1”,同时您仍在前面。它会立即收缩。 固定
立方体轴没有居中,所以当它旋转时,它会在不同的 xy 坐标处结束。
在 CSS 中,我将大小设置为 200x200(或 25 的任何系数),但由于 Z 变换,它并不完全正确。 这一个大部分已修复,请参阅底部的更新。
我该如何解决这三个问题?
这是 fiddle :http://jsfiddle.net/scottbeeson/phJpS/
这是重要的CSS部分:
.itemView {
width: 200px;
height: 200px;
/*position: relative;*/
/*margin: 0 auto 40px;*/
/*border: 1px solid #CCC;*/
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-margin-start: 0 !important;
-webkit-margin-before: 0 !important;
-webkit-margin-end: 0 !important;
-webkit-margin-after: 0 !important;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.cube figure {
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid black;
color: white;
}
.cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.cube .front {
background-color: #555;
border: 1px solid #ccc;
}
.cube .back {
background-color: #555;
border: 1px solid #ccc;
}
.cube .right {
background-color: #555;
border: 1px solid #ccc;
}
.cube .left {
background-color: #555;
border: 1px solid #ccc;
}
.cube .top {
background-color: cornflowerblue;
border: 1px solid #ccc;
}
.cube .bottom {
background-color: #555;
border: 1px solid #ccc;
}
.cube .front {
-webkit-transform: translateZ( 99px );
}
.cube .back {
-webkit-transform: rotateX( -180deg ) translateZ( 99px );
}
.cube .right {
-webkit-transform: rotateY( 90deg ) translateZ( 99px );
}
.cube .left {
-webkit-transform: rotateY( -90deg ) translateZ( 99px );
}
.cube .top {
-webkit-transform: rotateX( 90deg ) translateZ( 99px );
}
.cube .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 99px );
}
.cube.show-front {
-webkit-transform: translateZ( -99px );
}
.cube.show-back {
-webkit-transform: translateZ( -99px ) rotateX( -180deg );
}
.cube.show-right {
-webkit-transform: translateZ( -99px ) rotateY( -90deg );
}
.cube.show-left {
-webkit-transform: translateZ( -99px ) rotateY( 90deg );
}
.cube.show-top {
-webkit-transform: translateZ( -99px ) rotateX( -90deg );
}
.cube.show-bottom {
-webkit-transform: translateZ( -99px ) rotateX( 90deg );
}
.itemHandle {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
cursor: move;
white-space: nowrap;
background-color: cornflowerblue;
text-align: left;
/*border-top-right-radius: 15px;*/
}
另外,如果有人觉得这些应该是单独的问题,那也没关系。我只是认为它们都是同一个“问题”的一部分,这比将同一个 fiddle 贴 3 次要容易。
#1、#3 更新 ( updated fiddle )
我能够将正面的 transformZ 更改为 0 并调整其余的变换,基本上使立方体的正面与“workArea”位于同一平面上。这样好多了,但是视角有点偏离,就好像你没有正面看立方体一样。除非面部是半透明的,否则不会引人注意。这是更新后的 CSS:
.cube .front {
-webkit-transform: translateZ( 0px );
}
.cube .back {
-webkit-transform: rotateX( -180deg ) translateZ( 200px );
}
.cube .right {
-webkit-transform: rotateY( 90deg ) translateZ( 100px ) translateX(100px);
}
.cube .left {
-webkit-transform: rotateY( -90deg ) translateZ( 100px ) translateX(-100px);
}
.cube .top {
-webkit-transform: rotateX( 90deg ) translateZ( 100px ) translateY(-100px);
}
.cube .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 100px ) translateY(100px);
}
最佳答案
由于边距和填充,数字有偏差。
尝试:
.cube figure {
display: block;
position: absolute;
width: 200px;
height: 200px;
border: 0px solid black;
color: white;
margin: 0px;
padding: 0px;
}
添加的边距和填充 = 0
我现在已经改变了整个坐标系。如果让立方体中心位于 0 0 坐标会更容易。现在所有旋转的东西只需要旋转,这更容易理解。
如果您真的希望正面位于 z=0 平面上,请在基础层设置一个全局偏移。
关于CSS 立方体,无法与网格对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17325410/
我有 3 个具有相同结构但数据不同的数据库,因为它们来自不同的客户端。 现在,我有一个现有的 SSAS 项目。其数据源 View 、多维数据集和维度只能使用或访问一个数据库。 我想要的是能够使用具有相
所以我的目标是将这些立方体放在一个网格上,并让它们排成一行,可以拖动和捕捉。我根据 this example 使立方体运行良好,但我没有完全理解某些机制,因此遇到了一些问题。 立方体开始时比旋转后大。
我正在解决一个问题,我需要使用 C# 处理内存中的多维数据。我的要求类似于 OLAP 多维数据集,但没有那么复杂。例如,我不需要计算或聚合或类似的东西。我基本上想使用多维键来引用数据。例如: var
我在 Cubical agda 工作,并试图为以后的证明建立一些通用的实用程序。其中之一是,对于任何类型 A,它与 Σ A (\_ -> Top) 类型“相同”,其中 Top是具有一个元素的类型。问题
我有这个在 WPF Viewport3D 中绘制立方体的代码:
以下代码是我目前写的使用三个js尝试移动或翻译 使用 WASD 键上下左右旋转立方体对象,并使用空格键重置到原始位置(屏幕中间)。我对三个 js 很陌生,我不知道如何让运动发挥作用。任何帮助将不胜感激
我想通过使用 opengl 来绘制体素,但它似乎不受支持。我制作了一个立方体绘制函数,它有 24 个顶点(每个面 4 个顶点),但是当你绘制 2500 个立方体时它会降低帧速率。我希望有更好的方法。理
我正在努力为盒子基元创建线框。尝试了颜色、不透明度和透明属性,但似乎都不起作用。这是代码 - 需要渲染这样的东西 - 最佳答案 您需要查看THREE.Material docs对于这个,有一点需要注
我有一个 opengl 立方体,我想对所有 6 个面进行纹理处理。 我需要多个纹理吗? 这是当前立方体的屏幕截图: 基本上我不知道如何将纹理包裹在整个立方体周围...... 这是我的 cube.h 头
我正在为《我的世界》编写一个模组,并遇到了一个令人困惑的数学问题。我想找到中心 block 周围所有 block 的 ID。为此,我想循环遍历 3x3 的方 block 并返回哪些是我想要的方 blo
这是我的问题:我一直在尝试让这个 CSS 立方体打开滚动。我做到了!这是它的工作原理:https://codepen.io/vaninoo/pen/BmyYQd 我很高兴。但是和 friend 测试过
我正在尝试创建 3 个具有相同视角的 3d 立方体,这些立方体将在悬停时旋转 90 度。它几乎适用于 chrome,但如果你仔细观察左侧立方体的底部边框,你会看到 1 条蓝色像素线。当您将鼠标悬停在右
我正在编写一个立方体,但无法使其正确旋转,有人可以帮我吗?我已经尝试了一切。我的代码链接如下: Codepen Link @keyframes spin { from { transform: r
我想创建一个 CSS 立方体,它有 4 个面(正面、背面、顶部、底部),并且它仅在 X 轴上不断向上(或向下)旋转。但出于某种原因,我无法对齐所有 4 个边,所以它看起来像一个立方体。这是我的标记:
啊哈!看来我的问题是我给 gluPerspective 的 zNear 值必须大于 0,而且我必须启用深度缓冲区才能使其工作。我更新了下面的代码以使其正常工作。 我尝试过很多次这样做,并且一直认为我以
我正在为学校开发一个使用 HTML5 和 CSS3 的元素。该元素的目标是教幼儿如何计算简单的方程式。学习这一点的第一步是教他们识别不同形状的数字。 第一个练习是:显示一个随机数并让 child 选择
我用 html 和 css 制作了一个旋转立方体。 当我按向右和向左箭头键时,立方体会按预期围绕其中心旋转。但是,当我按下向上和向下箭头键时,它会在更大的空间内旋转。 在这种情况下,我也希望它围绕其中
我正在努力让立方体在 opengl 中呈现。当我将已经计算出的 MVP 传递给顶点着色器时,它工作正常,但是当我传递模型、 View 和投影然后在顶点着色器中进行计算时,它不显示立方体。当我将顶点着色
大家好,我是 opengl 世界的新手,所以这就像一个星期我试图了解 opengl 是如何工作的。所以我放下我的代码使用不同的例子,我编译它没有问题。但是立方体没有出现,我不知道为什么。谁能向我解释我
我有一个应该绘制立方体的类。 它在主体中很好地绘制了我的立方体,但我使用默认的 x、y、z 值创建它,以便默认情况下将其置于屏幕中央。在通过调用 build 绘制立方体后,我想平移和缩放立方体,但我显
我是一名优秀的程序员,十分优秀!