javascript - css3 rotateX 创建一条线

标签 javascript css transform css-transforms rotatetransform

enter image description here

Reproduction online

为什么这条白线是可见的? 它实际上不是白色的,只是显示了网站的背景,恰好是白色的。

当使用背景图像而不是旋转 div 的颜色时,这不会发生。

使用它来应用旋转:

$('.box').css('transform', 'translateZ(-'+halfHeight+'px) rotateX('+ deg +'deg)')

最佳答案

这是图形渲染器的问题。而且,它不会在所有计算机中都相同。

我的建议是,不要使用 translateZ(),而是使用 translate3d(),这将在可用时使用 GPU,并且动画会很流畅,不会掉帧。

更多阅读 MDN

关于javascript - css3 rotateX 创建一条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39818483/

相关文章:

Meteor 客户端转换集合与外部数据 (youtube)

javascript - 如何在加载特定 JS 后运行 Javascript 函数?

javascript - 递归深度展平的时间复杂度

html - 如何创建可变宽度的 CSS 按钮?

css - GPU如何加速CSS变换?

html - 需要帮助弄清楚为什么这个 slider 不会在 ie9/10 中翻转到背景

javascript - HttpInterceptor 在拦截器内调用另一个服务并等待响应

javascript - 如何向下滚动到 Scrollview 中包含的列表的特定索引? (Nativescript-vue)

css - 将文本添加到 Bootstrap 折叠的字形图标链接

javascript - 导航栏折叠菜单不适用于手机和平板电脑视口(viewport)