问题标签 [css-transforms]

我遇到了一个奇怪的问题-webkit-transform。如果我使用perspectiveandrotateX使元素“向上翻转”，如果元素足够高，它会闪烁或完全不渲染超过某个角度。

我设置了一个jsFiddle 演示来说明这个问题。左右移动鼠标来旋转矩形。

• 当元素高度为 400 像素时，一切似乎都正常。

• 单击“4000”使元素高 4000 像素。文字在一定范围内停止更新，呈现闪烁。

• 单击“40000”使元素高 40000 像素。它在小角度渲染良好，但在大约 80 度时完全消失。

这里发生了什么？有解决方法还是我应该提交 WebKit 错误？

（注意：我在 OS X 上的 Safari 和 Chrome 中都看到了这种行为。）

我正在应用 CSS 转换（以及特定于浏览器的 -webkit、-o 等）：

变换：矩阵（0.5，0，0，0.5，0，0）；

到一个 div，然后在所述 div 的子级上使用 jQuery 的 draggable() 和 resizable() 插件。

我遇到的问题是，当拖动或调整子元素的大小时，jQuery 所做的更改与鼠标“同步”的因子等于所应用的比例。

我在 stackoverflow 上找到了一个解决方案（尽管我愚蠢地没有为它添加书签，现在找不到它......）建议修补插件，并且效果很好。它遵循以下路线：

我进行了自己的更改，例如（您可以在 6-7 行上看到运动乘以“比例因子”）：

非常感谢提出这个建议的人。

所以，我的问题！有没有人遇到过一种在不需要修补 jQuery 的缩放元素中拥有可拖动/可调整大小事件的好方法？我用谷歌搜索过，这是我能找到的最好的解决方案。有谁知道可能在这些条件下使用 CSS 转换的 jquery 替代方案？

非常感谢您的任何回复。

我想在一个<ul>列表上使用 CSS3 转换，<li>其中包含一个<img>用<a>.

请参考http://jsfiddle.net/h2T8j/1/

我想实现将<ul>Y 旋转一定程度并将 Y 全部旋转<li>相同程度但方向相反，以使它们沿着倾斜的路径看起来是直立的。

但结果在 Chrome（9.0.1084.30 beta）和 Safari（v5.1.5）中看起来不同。

我尝试从-webkit-perspective-origin: 0% 0%中删除<ul>，但结果将浮出<li>元素。如果我试图将单击事件附加到<li>元素，它将无法在 Safari 上运行。

在 Chrome 中查看结果

与 Safari 中的结果相比

有没有办法让它们在两个浏览器中以相同的方式工作？

谢谢你。

我有一个 div，它在悬停时会放大 - 这一切都很好，看起来很棒。

但是，如果我悬停的 div 之一靠近容器的边缘，则缩放的 div 不会覆盖。

图片：

悬停前：

悬停时：

如您所见，增大的 div 位于灰色 div 的后面。我尝试过使用 z-index 值，但在这种情况下似乎没有效果。

这可能使用css转换还是我必须使用不同的方法

谢谢啊

我正在尝试使用 CSS3 制作某种翻转效果。

这是一个例子：http: //jsfiddle.net/MNhK7/

但是有一个问题，正如您在 Chrome 19 或 FF 11 中看到的那样，元素在过渡期间发生了位移，但结束和开始位置是应该的，为什么？

我已经设置transform-origin了我认为应该防止这种情况发生的设置，我错过了什么？

我有一个页面，其中有一个<div>元素轮，当您单击一个按钮时，整个轮子会旋转。

我通过使用本质上是绝对的 CSS 变换来实现这种效果。但是轮子很大，在我的高清显示器上看起来不错，但较小的屏幕会被切掉边缘。我不能像使用普通布局那样使用 % 宽度，我需要以与大多数浏览器缩放功能相同的方式缩小整个页面。

对于我自己，我知道 ctr+mouseWheel 会缩小页面，这样我就可以看到整个页面，但是我不能指望其他人这样做。

我知道我可以-browser-transform: scale(amt);在包装 div 上使用来获得我想要的效果，但是我想不出一种动态的方法。如果我将比例设置为 0.5，无论屏幕如何，它都会是 0.5。我希望轮子的边缘距离任何屏幕上的屏幕边缘只有几个像素。我知道媒体查询可以用来解决问题，但它们要么让我得到不太理想的结果，要么需要太多不同的查询。必须有一种以-browser-transform: scale(amt);编程方式进行修改的方法，或者某种其他方式来进行有限控制。

有什么想法吗？

我有 div 应用了 CSS rotateX 变换：

和一堆较小的 div 漂浮在其中，并应用了 :hover 规则。问题是只有一半的内部 div 对 :hover 事件做出反应。

JsFiddle：http: //jsfiddle.net/fNxgn/4/

我需要在一侧创建带有三角形的按钮（例如http://css-tricks.com/triangle-breadcrumbs/），带有线性垂直渐变和边框，并且我想使用纯 CSS3。如果我需要45度的“三角形”也没关系，我只是这样写

并将该伪元素的一半隐藏在 .button 下（因此只有另一半可见，如三角形）。

但是如果我需要另一个角度（例如更陡峭） - 我无法使用标准的 XY 旋转和缩放。我可以使用例如 2 个 div，一个用于三角形的上半部分，一个用于底部，但边框和渐变可能存在问题。

也许可以使用带有色标的多个渐变来做到这一点？

我有一个立方体元素在 3d 空间中旋转和平移。

我想在给定时间找出这个变换的rotateY部分。这可能吗？

我有：

帮助？:-)

我有 css 对 3d 空间中的元素进行卡片翻转。它工作得很好，除了当您向上和向下滚动页面时，您会在 Chrome 的某些位置随机地在页面上显示白色元素。我在 facebook 选项卡中附加了一张图片作为示例。在 chrome windows 中，白色“框”有时会掩盖内容。当我注释掉 3d 变换 css 时，这不会发生。这是做 3d 东西的 css 的小提琴（http://jsfiddle.net/derekaug/QSEvs/）。不幸的是，我还不能链接到实际的标签，因为它不是公开的。