css中translate:translate3d(50%,0,0)和left:50%之间的区别?

2023-12-22

css 中的 transform:translate3d(50%,0,0) 与 left:50% 有何不同? 这是jsfiddle https://jsfiddle.net/svjnwme0/我做的。

transform: translate3d(50%,0,0)

and

left:50%;

translate3d(50%,0,0)考虑元素本身的百分比,因此它是从元素大小的左半部分转换的。

在小提琴中绝对定位的 div 的左侧是相对于相对定位的容器 div 的,因此left:50%;是该容器的 50%。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css中translate:translate3d(50%,0,0)和left:50%之间的区别? 的相关文章

  • Bootstrap 3 按钮之间的空间

    如果我将几个 Bootstrap 3 按钮排成一行
  • 如何让更大的布局适合小设备屏幕?

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • CSS 属性选择器中的 [att~=val] 与 [att*=val] 有何不同?

    也许我错过了一些东西 但它们看起来很相似 例如 如果您使用 a alt thumb or a alt thumb 我可以通过哪些不同方式缩小选择范围 我的理解是 为您提供了引号中的部分匹配 而 为您提供了部分匹配 我将稍微修改一下代码 但由
  • 检查CSS标题属性是否不为空并添加内容

    我的目标是 检查title属性是否不为空 如果不是 则应添加此标题属性的值以及连字符 另一方面 如果标题属性为空 则根本不应该添加 这是我当前的 CSS 代码 div hover before content attr title not
  • 检测滚动条是否可见(例如在移动设备上)

    我见过很多关于检测 HTML 元素是否可滚动的问题 答案 例如动态检测滚动条 https stackoverflow com questions 33805052 detect scrollbar dynamically 我需要类似的东西
  • Chrome 中的混合混合模式问题

    我一直在尝试在包含 css 不透明度过渡实例的页面上使用混合混合模式 似乎正在发生的情况是 包含 mix blend mode 的 div 在过渡期间 或者更确切地说 在动画进行过程中 显示得与没有混合模式时一样 我只发现这是 Chrome
  • SASS for 循环更新 hsla 亮度返回错误 $lightness: "96.77419" 不是 `hsla' 的数字

    我试图循环一定次数 逐渐降低 hsla 的亮度值 但是当我运行循环时 出现错误 lightness 96 77419 is not a number forHSLA 谁能告诉我哪里出了问题或者如何改进 Code iterations 31
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • 两个单独表格上的 Td 高度

    我有两个单独的表 我在每个 tr 上使用焦点 悬停函数 该函数同时在两个表上都很好用 我的问题是 td 高度 因为如果第一个表中 td 的描述更大 将显示在中的两行上相同的td和td的高度将被修改 但仅限于第一个表td 如何记住第一个表中
  • CSS 背景在 iOS 中拉伸以填充高度,但滚动上有空白

    这个 CSS 让我的背景在 iOS 中填充 100 的屏幕高度 但有一个小问题 当你向下滚动时 最初有空白 然后当你松开手指并停止滚动时 背景图像会 调整 并填充 100再次屏幕高度的 如果您继续滚动 该问题不会在同一页面上再次出现 只是第
  • 不透明动画在 IE 上不起作用

    我有一个动画菜单 其中包含一些级联不透明动画 这些动画在打开菜单和悬停每个按钮时执行 它只是每 100 毫秒向菜单上的每个图标添加 colorHigh 类 你可以看到一个现场演示在这里 http germanalvarez net 5 la
  • height:100% 在 Internet Explorer 中不起作用

    我有一个关于 CSS 属性的问题height 100 在 Internet Explorer 中 height 100 在 IE 中不起作用 但在 Firefox 和 Chrome 中可以 HTML 文件 div ul ul div
  • CSS 列不会水平对齐

    我正在使用列计数来允许我的文本流入两个不同的列 但第一列的顶部 最左边 低于另一列 col moz column count 2 webkit column count 2 column count 2 div h3 Options h3
  • 工具提示未显示在 fontawesome 图标按钮上

    我有一个很棒的图标嵌套在 a 中 但工具提示没有弹出 i class fa fa random title some tooltip i style i fa display inline block 如果您使用的工具提示插件使用 befo
  • 如何使 Twitter bootstrap 模式全屏

    div class modal hide fade div class modal body div div 如何为上面的代码制作一个 Twitter 引导模式弹出全屏 我尝试使用 css 但无法按照我想要的方式得到它 任何人都可以帮我吗
  • 如何选择带有空格的类

    我如何选择一个类class boolean optional 我已经尝试过这个 boolean optional CSS boolean optional CSS 正如 Zepplock 所说 这实际上是一个属性中的两个类 boolean
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt
  • chrome 中的 Flexbox flex-flow 列换行错误?

    当使用列换行作为弹性流时 它似乎会对 chrome 中的容器尺寸造成问题 HTML 示例 div class root div class outer div class inner A div div class inner B div
  • 打印html时在页面上打印页码

    我读过很多关于打印页码的网站 但当我尝试打印它时 我仍然无法让它显示在我的 html 页面上 所以 CSS 代码如下 page margin 10 top center font family sans serif font weight

随机推荐