Question

我想旋转全宽div（从一侧到另一侧没有可用空间），其中包含一些内容。

我希望右侧的角落触摸页面的右侧，左侧的角落触摸页面的左侧。我认为width:200%和overflow-x:hidden是最佳解决方案。

我怎样才能做到这一点？

这是一个例子。请注意，角落不会碰到页面的两侧。

.rotated {
  width: 100%;
  height: 100px;
  background-color: red;
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

<div class="rotated"></div>

Answer 1

您可能会发现CSS transform skewY()有帮助。它会在不转动角落的情况下扭曲元素。

我还将transform-origin设置在右上方，这样元素就不会偏离页面顶部。

html,body {
  margin: 0;
}

.rotated {
  height: 100px;
  background-color: red;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: skewY(-6deg);
  -ms-transform: skewY(-6deg);
  transform: skewY(-6deg);
}

<div class="rotated"></div>

有关进一步参考，请参阅MDN上的Skewing and Translating示例。

Answer 2

你可以用比例增加水平比例，但内容也会缩放（只要你知道它就可以补偿）

.rotated {
  width: 100%;
  height: 100px;
  background-color: red;
   transform:  scale(1.2 , 1) rotate(-6deg);
}

<div class="rotated"></div>

CSS3全宽旋转

2 个答案: