2

在下面的片段中，我有一个旋转 45 度的 div。我们怎样才能在不修改 HTML 的情况下沿 X 轴缩小这个 div ？

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  width: 10rem;
  height: 10rem;
  margin: auto;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg );
}
<div></div>

使用包装元素实现的示例

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  margin: auto;
  
  transform: scaleX( 0.75 );
}
div > div {
  width: 10rem;
  height: 10rem;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg );
}
<div>

  <div></div>
  
</div>

我们如何在不向仅包含 1 个 div 的原始示例添加任何标记的情况下实现上述目标？当然，我们可以用 JavaScript 做所有事情，但这里的兴趣特别是如果只有 CSS 就可以做到这一点。也许通过伪元素？

编辑解释为什么这不是如何在 CSS 中应用多个转换的副本？并且简单地将转换放在同一行特定顺序不起作用，请参见下面的代码段：

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  width: 10rem;
  height: 10rem;
  margin: auto;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg ) scaleX( 0.75 );
}
<div></div>

之前的转换不会“记住”。缩放是从一个角度完成的，就好像 div 在旋转之前仍处于其原始位置一样。

4

0 回答 0