问题标签 [translate3d]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 禁用 css/javascript 动画（转换： translate3d）
当我的帖子网格加载时，帖子加载在零位。然后 translate3d/width 抓住他们的价值观，他们去正确的地方： http: //www.marianoshoes.com/the-journal/
如何使用 css 禁用这个奇怪的 javascript/css 动画？
谢谢！
css - css3 translate3d 零高度 100% 销毁
我遇到了谷歌无法帮助我的问题。在容器上应用 translate3d(0, 0, 0) ，这会破坏宽度和高度为 100% 的内部容器的尺寸。我创建了一个小的 jsfiddle 来演示这一点。如果您在#page 上删除翻译，则尺寸正确... http://jsfiddle.net/11vt14nx/1/
HTML 部分
的CSS
有人知道如何解决这个问题吗？
提前致谢
问候托马斯:)
html - CSS变换翻译顶部的空块
当我尝试translate3d(150px,0px,0px);在我的“内容” div 上应用时，我在页面顶部看到一个空块。不知道怎么修
这里的codepen http://codepen.io/sbaglieri/pen/LERQXy
javascript - 在 translate3d 之后获取 div 位置
在 Javascript 中，当我通过 translate3d 方法使用 gpu 移动元素时，元素样式左侧的位置根本不会改变。由于 cpu 甚至不知道发生了任何运动。
通过 translate3d 移动元素后，如何跟踪元素的新位置？
css - 大数据IE，慢translate3d
我使用这个插件'SidebarTransitions by codrops'来制作侧边栏菜单..
为了显示/隐藏菜单，它使用这个 translate3d css
我的问题是当我用大量数据填充网站时，比如表格中的 20000 行，translate3d 效果在 IE 中变得非常慢（使用 10 或 11 atm），需要 5-10 秒才能完成效果并使用 100% cpu核心..
Chrome中同样的效果立即出现，为什么？什么 tweek 让 IE 工作？
css - CSS 3 动画。translate3d 与矩阵
我一直在做需要平滑过渡和动画的项目。我们最近几乎 100% 的时间从使用 Javascript 迁移到 CSS 动画。
我发现使用 translate3d 可以在移动设备和桌面设备上提供非常流畅的动画效果。
我目前的动画风格是这样的：
CSS：
最近，我开始研究似乎引起了很多关注的不同框架。两个在特定的 GreenSock ( http://greensock.com/tweenmax ) 和 Famo.us ( http://famo.us )。两者都显示出令人敬畏的帧速率和惊人的性能。
我注意到他们正在使用矩阵变换。
Greensock 示例（使用矩阵）：
Famo.us 示例（使用 3D 矩阵）：
我的问题是...... translate3d 和矩阵有什么区别？使用矩阵比 translate3D 有很大的改进吗？还有另一种方法可以产生更好的结果吗？
我对 translate3D 很满意，但想学习任何可以提供最流畅的最佳动画的方法，并寻求指导。
css - 使用带有 css 动画的整页背景图像的有效方法
我在使用整页背景图像和 css 动画时遇到问题。无论我如何尝试优化动画，它总是在背景图像之上运行缓慢（远高于 60fps 阈值）。我使用 csstranslate3d属性来移动对象。如果我删除背景图像，一切都会非常顺利和快速地运行。
css - 在 chrome 中使用 translate3d 会在页面底部创建空白区域
我在使用translate3dCSS 属性为 div 设置动画时遇到问题。div 必须在页面中向上滑动，并且
div必须向上移动一些像素。.box.container
动画效果很好，除非您在触发之前一直向下滚动页面。如果您向下滚动页面并启动动画，则会从无处弹出一个空白区域，我无法弄清楚那是什么。
为了更清楚地了解如何重现问题，我制作了一些 gif：
它应该如何工作
重现错误：
向下滚动页面并单击按钮，使 div 跳起来留下一个空白区域。
我假设这是一个 Chrome 错误，因为它在 Firefox 上运行良好（尚未测试其他浏览器）。谁能启发我什么是错的？即使页面向下滚动，我怎样才能使这个动画正常工作？
编辑：使用translate而不是translate3d不会改变奇怪的行为。
jquery - css3在滚动上转换3d背景图片
您好，我正在寻找对标题图片的影响，如下所示：http: //www.gamebreaker.tv/news-main/david-lynch-leaving-twin-peaks-revival/
关于如何制作它的任何提示？或者有没有准备好解决这个问题？
css - Fullpage.js 覆盖元素的 z-index
我在使用 fullpage.js 时遇到了一个非常棘手的问题，这是一个为您提供整页滑块的库。我希望滑块包含带有标题 (h1) 的背景图像。此外，在背景和标题之间，我想放置一个透明图像作为叠加层，一个不滑动的图像（具有绝对位置）。
尽管 II 可以通过将 z-index 设置为 2 来将标题移动到覆盖层之上，但 full page.js 添加了 -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) 滑动到滑块容器，从而忽略 z 值并将标题移动到叠加层后面。
我试过 transform-style: flat; （就像他们在这里提出的那样：css z-index lost after webkit transform translate3d），但这对我不起作用。
原来我不是唯一一个有这个问题的人（https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled）。
有谁知道如何解决这个问题？
谢谢！