问题标签 [css-transforms]

我想将 Javascript 轮播转换为在 iOS 设备 iPad 和 iPhone 以及使用能够利用 CSS 转换的硬件加速的 webkit 的 Android 设备上顺利运行。

是否已经有一个库或一些代码片段可以设置位置和大小？

我发现jquery.animate-enhanced可能很接近，但它需要动画，并且还进行特征检测 - 我想做一些更简单的事情，它看起来比这复杂得多。

我怀疑解决方案需要解决几个复杂问题：

- 简单重用代码以使用top/ leftCSS 属性或带有翻译的 CSS 转换（以及转换它们所需的任何重新计算）

- 使用比例变换而不是设置宽度和高度

设置步骤如下：

-设置-webkit-transform-style为preserve-3d

--webkit-transform-origin根据需要设置（以及如何设置？）

我正在尝试使用 CSS3 动画来放大 div。但是，我想将 div 的顶部保持在它所在的位置。所以我只希望 div 的底部放大。我该怎么做呢？

我background-attachment:fixed的工作正常。但是当我在那个 DIV 上定义CSS3 旋转并向下滚动然后background-attachment:fixed停止工作。

检查这个http://jsfiddle.net/P3jS4/

现在我正在研究chrome18。

当您删除旋转 css 时，背景附件：固定工作正常。

http://jsfiddle.net/P3jS4/2

我正在使用 Modernizr 进行特征检测，并使用 TransformJS 为 CSS3D 属性设置动画。TransformJS 使用 CSS 矩阵来设置平移、缩放和旋转属性的样式，即使在 IE 中也可以正常工作，因为它通过 filter 属性支持矩阵转换。

我的问题是 Opera 仅支持 CSS 矩阵，因为 Opera Presto 2.5 现在似乎处于 alpha/beta 版本。有没有办法检测浏览器是否能够进行 CSS 矩阵转换？

任何帮助将不胜感激。:)

编辑：好的，我错了 :) Opera 确实支持 CSS 矩阵，但值必须是无单位的。但是测试它仍然会很有趣。

It seems that both of them could make the element move from its current position. Are these two methods interchangeable?

我在 css3 实验中将 10,000 个小 div 元素从浏览器视口的顶部移动到底部。对于这个测试，我使用了 2 种不同的方法：

1. 使用 GPU 加速translate3D(x, y, z)或translateZ(0)
2. top只需调整css中的属性即可无需GPU加速

使用无硬件加速在 Google Chrome 上运行相当流畅。

如果我启用硬件加速性能会变得更糟。太糟糕了，盒子甚至不再均匀分布：

使用 GPU/硬件加速：

没有 GPU/硬件加速：

问题

为什么呢？不应该使用 GPU 来提高性能吗？

演示应用

https://www.timo-ernst.net/misc/hwtest/

来源

https://github.com/valnub/hwtest

我用于测试的硬件

• Apple Macbook Pro 15" 2015 型号
• CPU 2,8 GHz 英特尔酷睿 i7
• 16 GB 内存
• macOS 大苏尔 11.2

更新（2014-11-13）：由于这个问题仍然引起关注，我想指出问题本身似乎仍然存在，尽管在提供的现代硬件演示中可能不再看到提到​​的口吃。较旧的设备可能仍会出现性能问题。

*更新 II (2021-02-17)：问题仍然存在，但您必须根据使用的硬件增加演示中移动的盒子数量。我更改了演示应用程序的 UI，因此您现在可以调整移动框的数量，为您的特定硬件创建口吃动画。为了重现这个问题，我建议创建足够的框来查看启用 GPU/硬件加速的卡顿。然后勾选该框并再次运行测试而不加速。动画应该更流畅。

我在网上搜索并找到了几个材料，但没有一个能清楚地说明这个概念，至少对我来说是这样。例如，w3schools 说它定义了从视图中放置 3D 元素的像素数。完全理解它是如此抽象。谁能用更生动易懂的方式告诉我？如果有一些图像来展示这个概念，那就再好不过了。

在 GIMP 等图形程序中，将一条线变成一个环是一项简单的任务：

_{（来源：adamhaskell.net）}

我正在尝试确定是否可以在 CSS 中产生相同的效果。

所以我制定了以下内容：

• 上述算法映射x到r和y到θ
• 为此，x缩放到 的范围[0,w/2]，其中w是图像的宽度
• 此外，y被缩放到的范围[0,2π]
• 将极坐标转换回笛卡尔：xc = rp*cos(θp)和yc = rp*sin(θp)
• 然后翻译结果，使原点位于图像的中心。
• 所以我们有：

这一切都很好而且很花哨，但是我怎样才能在 CSS 中产生这样的转换呢？大概没有一个关键字是有用的，所以它必须是矩阵变换。好吧，我不知道如何从上面的两个方程构建一个矩阵，更不用说如何在 CSS 变换中表示它了。

谁能帮我完成这最后一步？

我在这里为我的问题创建了一个小提琴http://jsfiddle.net/aakashgoel/ZcF4N/

3D 渲染在 Mozilla Firefox 中运行良好，但在 Google Chrome 中失败。Chrome 不支持其中使用的哪些属性？

编辑：预期结果：单击框“1”将其翻转。它应该更改为 2，背景为蓝色。

编辑：这是 chrome 输出的内容：

当尝试应用带有透视的 CSS 变换时，我遇到了一个奇怪的故障，即 div 的上半部分是不可选择的。我在jsfiddle上创建了一个快速演示

[顶部选择的红色框应该是可点击的等]

有谁知道如何解决这一问题？我查看了其他类似的错误，但他们的解决方案似乎在这里不起作用。

干杯