html - 基于对象宽度的 TranslateY

标签 html css css-transforms

我有一个关于转换的快速问题,更具体地说是关于翻译的问题。我有一个旋转了 90 度的 div,我想在 X 轴上平移它,但是我想平移它的长度与文本高度的长度一样多。我的意思是,我目前正在处理的 div 是横向的。如果高度为 200px,宽度为 300px(不是,只是想帮助它更容易可视化,我不知道 div 的高度,因为里面有文本),我想将 div 200px 转换为权利。

我知道如果我使用带百分比的 translateX 或 Y,它会分别根据宽度或高度的百分比进行转换,但我想知道如何反转它。非常感谢!

最佳答案

这可以用 javascript 来完成。 获取元素实际高度:var height = document.getElementById("someId").clientHeight; 并将其设置为转换属性的值:element.style.transform = translateY('${height }')

注意:使用了temlpate literals将变量放入字符串中

关于html - 基于对象宽度的 TranslateY,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50710475/

相关文章:

javascript - 如何在 HTML Canvas 中将正方形转换为梯形?

jquery - 悬停在单元格上时显示的 4x4 网格

javascript - 使用移动元素跟踪鼠标悬停事件

javascript - 当我在背景图像 div 上应用叠加颜色时,内容会被禁用

具有相同名称的 CSS 类和 ID

html - 搜索文本字段和按钮高度/位置 (CSS)

javascript - 使用 JQuery 进行 TranslateX

html - 挂锁的 Unicode 字形

html - 如何用一个元素创建 3D 透视图像?

css - 使用 CSS3 转换保留状态