问题标签 [css-transforms]

我有以下代码：

HTML正文代码：

CSS 代码：

JavaScript 代码：

JavaScript 代码在页面的加载事件上运行。你可以在上面运行代码：http: //jsfiddle.net/fakjX

我需要在 IE9 上将 CSS3 变换比例样式从 0.3 更改为 1。但我不能。我认为这是一个 IE9 的错误。代码似乎没有问题。

你同意这是 IE9 的错误吗？或者你有解决这个问题的方法吗？

谢谢你。

我在 Linux 64 位机器中使用 Chrome 12，但我无法让下面的任何示例工作：

• http://www.satine.org/research/webkit/snowleopard/snowstack.html
• http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
• http://kevchapman.co.uk/css/webkit-css-perspective-demo/

他们都使用-webkit-perspective，但最终结果与在 Safari (Windows XP) 中得到的结果有很大不同。那么，Chrome 到底支持 CSS 3D 变换吗？还是支持仍然有限？

谢谢！

CSS3 3D 变换 + 动画很棒。我想知道是否有办法使某些东西弯曲。

此示例翻转（纸张）div，但动画看起来很僵硬，因为实际上，当您翻转纸张时，它会弯曲一点。

那么我忽略的任何属性或者可能使它看起来像弯曲的组合？

弯曲的页面卷曲示例（图像）： http: //numerosign.com/software/css3machine/#documentation

我在使用 mozilla moz-transform scale 属性时遇到问题。
我正在寻找缩放属性的替代品，它在除 Firefox 之外的所有内容中都可以正常工作。

当我想缩小 div 时，它的“内容”确实缩小了，但容器的大小保持不变，在其他内容周围留下了很大的空隙。

有什么办法可以强制容器尺寸减小吗？

为了澄清，我在这里举了一个简单的例子。
在 chrome 和 firefox 中打开它，你会看到不同之处。

我正在一个使用对角对齐的图像的网站上工作。这些图像相当简单，里面有一些文本，所以我可以使用图像或 CSS3transform: rotate和border-radius属性来实现效果，当然，还有所有专有扩展。

但是，我想知道使用其中一个是否有显着优势。我在想也许纯 CSS 的替代方案会加载得更快，但缺点是为每个图像使用更多代码。虽然使用图像我仍然需要为每个元素做很多定位。此外，第一种情况下的 CSS 不会使用特定于浏览器的扩展进行验证，如果我仍然确保网站在大多数浏览器中正确显示，这有多重要？

是否有使用这些选项之一的通用方法？你会推荐什么？

我正在使用 webkit 转换创建卡片翻转效果。我让它在一个部分中按我喜欢的方式工作，在那里我有一个围绕其中心轴旋转的 DIV，呈现出一张正在翻转的卡片的外观。

我现在想将同样的效果添加到页面转换中。我使用相同的 CSS 和 HTML 结构，但在这种情况下，我没有得到围绕中心轴旋转的效果。

相反，它看起来像是沿着锚定在对象左侧而不是中心的 y 轴旋转（所以它看起来像一个门打开，而不是一张卡片翻转）。

我一直在阅读规范，但无法弄清楚哪个属性控制旋转轴的位置。我需要添加或更改什么才能使翻转工作？

html结构：

和 css（.flip 正在通过 jQuery 添加以启动效果）

问题：当使用“overflow: auto;”计算包含 div 的滚动条的 scrollHeight 和 scrollWidth 时，浏览器（FF5、Chrome12、IE9）会忽略应用于 div 内的子元素的 css3 转换。

我已经对 jsfiddle 进行了一个小测试，显示了不良行为。

http://jsfiddle.net/4b9BJ/

本质上，我正在尝试创建一个简单的基于 Web 的图像查看器，使用 css3 转换进行旋转和缩放，并且希望包含具有固定宽度/高度的 div 能够滚动以查看它包含的图像的全部内容。

有没有一种聪明的方法来处理这个问题，甚至是一个粗略的解决方法？任何帮助表示赞赏。

目标：将全景图像/视频包裹在圆柱体周围并控制内部的“相机”以环视全景。

首先，我找不到任何图像示例，更不用说围绕圆柱体缠绕的视频了。有人知道怎么做吗？

我认为我应该可以很好地使用鼠标或箭头键控制视口的交互方面，但我不知道如何从这个圆柱体开始，因为我有点像 CSS 转换和 3d webkit 编码的菜鸟......< /p>

爱你很久 - 非常感谢你的任何回答！-乔尔

是否可以在 CSS 中设置旋转点？默认旋转点在 50%、50%。我试过了：

但它不起作用......有什么建议吗？

我正在寻找一种简单的方法来获取一个对象并转换它的 rotateY 属性，而不用动画到它的预设过渡。这将帮助我完成此幻灯片放映（仅在 Chrome 或 SAFARI（WEBKIT）中查看）

这是效果的细分示例：

CSS - 过渡设置为 5s

阶段1

元素1 - 旋转Y：0；

元素2 - 旋转Y：-180；

用户- 点击按钮

阶段2

元素1 - 旋转Y：180；

元素2 - 旋转Y：0；

第三阶段

元素1 - 旋转Y：-180 ；

元素2 - 旋转Y：0；

用户- 点击按钮

第四阶段

元素1 - 旋转Y：0；

元素2 - 旋转Y：180；

在第一次转换（阶段 1 和 2）完成后，需要将Element1的 rotateY 值设置为 -180，而不进行转换，以便它处于Element2在阶段 1 中的位置。有了这个，动画将使元素看起来相互旋转，正如您在我提供的示例链接中看到的那样。不幸的是，在所有元素都有rotateY：180之后，效果就停止了；

我想做一个 jsFiddle，但我现在真的没有时间在这个项目上。

我需要一个解决方案，只需将对象从 a 点带到 b 点，而无需任何动画/过渡

希望一切都有意义