我申请后如何检索宽度和高度属性transform: rotate(45deg);？

比如,旋转后11x11平方变为17x17(Chrome结果),但javascript仍然返回原始宽度/高度 - 10x10.

我怎么得到这个17x17？

如何使用仅具有水平CSS的视差效果来引导站点？

要求

• CSS只有视差
• 父层必须具有宽度/高度== 100vw/100vh
• 子图层的宽度/高度必须> 100vw/100vh
• 子图层必须在视觉上与父图层宽度对齐100%
  • 到目前为止,子图层在技术上确实有100%的父级宽度,但由于perspective它们在视觉上看起来并没有占据父母宽度的100%
• 子层(第一个除外)必须相对于其父层具有顶部偏移量
• 结果必须基于计算才能具有最大的灵活性
• 必须跨浏览器固体(至少最新版本的专业)

到目前为止我做了什么

实际上这个问题是一个后续问题.
这是我在SASS或CSS中使用当前模型状态的PEN .

工作模拟示例(jQuery)

在JavaScript中,它很容易实现我正在寻找的东西.所以这是一个PEN模拟我想用CSS模仿的效果.

已知问题

我现在最关心的问题是,浏览器似乎以不同的方式呈现这种情况.查看浏览器窗口(chrome vs ff)的屏幕截图,滚动到下方的右下角.但我希望这可以避免.

那里有很多视差教程.为什么会有所不同？

实际上我研究了很多,但没有找到甚至一个描述如何实现水平视差(意味着子层的宽度> 100vw).当然,那里有水平视差滚动.但它们都有一个共同点:子层宽度总是<= 100vw - 这实际上就是差异.

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: …

我想做以下事情:给定一个带透视的容器和一个带有translateZ值的内部元素,我想用translateY"拉起来"以便在视觉上触摸周围容器的顶部:http:// jsfiddle达网络/ 8R4ym/129 /

是否存在某种公式,给定容器的透视值,元素的宽度和高度以及它的Z-平移我可以得到那种"顶部"计算？我一直在玩它,但我似乎无法找到它的一些规则,因为似乎这些都是变量.

谢谢你的帮助.