- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以,我将向您展示我的代码,也许您会突然想到什么。我正在玩一些 CSS3 和 Transform(以立方体的形式)
这是我的测试站点 - http://warm-cove-2672.herokuapp.com/
这看起来不错,并且在 Chrome 中运行得很好......
当你旋转立方体时,Firefox 不会保持它的形状(而且它变小了?)...
IE 它根本不起作用...
CSS
#camera {
position: relative;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
-ms-perspective: 800;
-ms-perspective-origin: 50% 200px;
-o-perspective: 800;
-o-perspective-origin: 50% 200px;
#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
-ms-transition: -ms-transform 2s linear;
-ms-transform-style: preserve-3d;
-o-transition: -o-transform 2s linear;
-o-transform-style: preserve-3d;
.face {
position: absolute;
height: 400px;
width: 400px;
padding: 5px;
border: 20px solid #333;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-size: 400px;
line-height: .9;
}
.a {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-ms-transform: translateZ(200px);
-o-transform: translateZ(200px);
}
.b {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-ms-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
}
.c {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-ms-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
}
.d {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-ms-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
}
}
}
js
$('#cube').css({
"webkitTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"mozTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"msTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"OTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"transform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"
});
这些旋转变量是 +90 或 -90,具体取决于点击的内容。
想法?
最佳答案
Firefox 不喜欢没有“px”的透视属性。
尝试将其更改为:
-moz-perspective: 800px;
对于 IE10 - 它不支持 preserve-3d
。如果您希望它也适用于 IE10,则需要对每一侧应用转换。
Stu Nicholls 在 CSS play 上有一个演示:CSS play - 3D Animated Cube for Internet Explorer IE10
关于javascript - 浏览器与 Transform 的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18730110/
我有一段这样的代码。我发现 myResults = writer.getBuffer().toString(); 对某些用例返回 EMPTY STRING,但对其他用例则不返回。 我查看了服务器,但在
如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、-moz-transform 、-o-transform 和 -ms-transform css? 这段
我正在使用 javax.xml.transform.Transformer.transform() 通过 xsl 样式表将一个 xml 转换为另一个 xml。我想以编程方式设置第一级 child 的排
为了使 seaborn.pairplot() 正常工作,在 jupyter notebook 中执行了以下步骤。 /usr/local/lib/python2.7/site-packages/matp
假设这个输入 XML 编写这些代码行: StreamSource source = new StreamSource(new StringReader(/* the above XML*/));
如何在 spring 框架中配置 java.xml.transform.Transformer ?我需要转换器的实例来通过 xslt 将 xml 转换为文本。因此,配置的转换器应该了解 xslt 样式
我一直在核心数据中使用可转换属性,将图像和颜色等复杂对象转换为原始数据。我拿了this ... The idea behind transformable attributes is that you
我正在尝试打开 XML 文件,添加一些更改,然后保存到其他 XML 文件结果。我正在使用标准 javax.xml.parsers.* 和 javax.xml.transform* 类。 但在保存的文档
Transformer(变换方法)对输入源的大小有限制吗? 我正在尝试转换一个相当长的 (18M) XML,但收到一个奇怪的错误 "The element type "HR" must be term
我正在尝试解析一个非常简单的示例: 100 我使用的样式表如下: 这在 libxs
来自文档 for from_pretrained ,我知道我不必每次都下载预训练的向量,我可以使用以下语法保存它们并从磁盘加载: - a path to a `directory` contain
默认缓存目录磁盘容量不足,我需要更改默认缓存目录的配置。 最佳答案 您可以在每次加载模型时指定缓存目录 .from_pretrained通过设置参数cache_dir .您可以通过导出环境变量 TRA
有一个函数,例如: CATransform3DGetAffineTransform Returns the affine transform represented by 't'. If 't' ca
我有一个包含 WCF 设置的配置文件: “add”元素只有一个 baseAddress 属性,所以我不能使用 Match 定位器。一种方法如何像我的示例中那样转换多个元素? 最
在收到下面链接中描述的错误后,我已将实体属性的 Transfomer 设置为 NSSecureUnarchiveFromData(之前为 nil)。 CoreData crash error Xcod
当我写Document时使用 Transformer 的 transform() 方法转换为 XML,生成的 XML 文档的格式很好 - 所有元素都写在单独的行上并缩进。除了第一个元素与定义写在同一行
我不明白 StreamResult 实例会发生什么。我看到 Transformer 对象接收 source 和 streamResult: transformer.transform(sour
从下面的代码片段我应该得出结论,std::transform 比 boost::transform 更受欢迎,因为前者使用更少的初始化和析构函数可能更有效比后者? #include #include
transform() 可以将函数应用到序列的元素上,并将这个函数返回的值保存到另一个序列中,它返回的迭代器指向输出序列所保存的最后一个元素的下一个位置。 这个算法有一个版本和 for_each()
我是 react-native 的新手。在项目上将 react-native 从 0.48.3 升级到 0.62.2 后,运行“react-native run-ios”命令时出现错误:“index.
我是一名优秀的程序员,十分优秀!