父div上的css3缩放变换,但在某些相关的div中保持不变的大小

Question

我正在使用css3缩放变换来缩放包含其他div的div.

我遇到的问题是我需要保留一些内部div,基本上好像它们没有缩放,它们的大小不应该改变,但是我确实需要用其他内容来扩展父div.

你怎么能扭转一些div的缩放？
我正在尝试应用反向缩放.
如果整个div应用了1.5的值,我试图找到我现在应该扩展其他div的值,以便在视觉上将它们恢复到以前的状态.

Answer 1

如果父div已按比例缩放1.5,则需要按子系数缩放子项1/1.5 = 0.(6)以保持其大小不变.

例

通常,为了取消子元素已应用于父元素且比例因子为的a比例变换,您需要对子元素1/a本身应用另一个因子比例变换.

你要么需要:

• 在执行任何其他操作之前手动计算比例因子,然后在代码中使用它(上面链接的示例)
• 使用预处理器为您处理(SASS示例)
• 使用JavaScript来计算所需孩子的比例因子,并设置规模transform上的孩子

Answer 2

您可以使用 CSS 变量来存储比例因子，然后使用calc()计算具有特定类的子元素的逆比例：

\n\n

\r\n

\r\n

.wrapper {\r\n  transform: scale(var(--scale));\r\n  background: #ddd;\r\n}\r\n\r\n.wrapper > * {\r\n  text-align: center;\r\n}\r\n\r\n.wrapper > .revertscale {\r\n  transform: scale(calc(1/var(--scale)));\r\n}

\r\n

<div class="wrapper" style="--scale: 0.8">\r\n  <h2>scaled title</h2>\r\n  <p>scaled description</p>\r\n</div>\r\n\r\n<div class="wrapper" style="--scale: 0.8">\r\n  <h2 class="revertscale">not scaled title</h2>\r\n  <p class="revertscale">not scaled description</p>\r\n</div>

\r\n

\r\n

\r\n

\n\n

\xe2\x8b\x85\n\xe2\x8b\x85\n\xe2\x8b\x85

\n\n

如果您不希望任何子元素缩放，另一种方法是将包装器设置为伪元素：

\n\n

\r\n

\r\n

.wrapper {\r\n  position: relative;\r\n}\r\n\r\n.wrapper > * {\r\n  text-align: center;\r\n}\r\n\r\n.wrapper::before {\r\n  content: "";\r\n  z-index: -1;\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  transform: scale(var(--scale));\r\n  background: #ddd;\r\n}

\r\n

<div class="wrapper" style="--scale: 1">\r\n  <h2>title</h2>\r\n  <p>description</p>\r\n</div>\r\n\r\n<div class="wrapper" style="--scale: 1.2">\r\n  <h2>title</h2>\r\n  <p>description</p>\r\n</div>\r\n\r\n<div class="wrapper" style="--scale: 0.8">\r\n  <h2>title</h2>\r\n  <p>description</p>\r\n</div>

\r\n

\r\n

\r\n

\n