Question

这个问题已被提出，我一直试图让它与我的代码一起工作几个小时，但似乎无法做到。简而言之，我可以绕过CSS / HTML，但是在Webflow中设计网站然后提取HTML，所以我显然遗漏了一些东西。

这是codepen（你可以看到旋转的图像，但重叠） http://codepen.io/jiselllla/pen/yMYwOr

我正在尝试将图像顺时针旋转90度。它显示在文件夹中旋转，当我查看它时，原始图像必须以非旋转（横向）方向保存，以使其显示如下。

我试图模仿风景照片的图片代码，但只是添加旋转。它会旋转，但不会发生阻塞的定位。操作img类更有效吗？感谢...

.w-richtext figure.w-richtext-figure-type-image-rotate,
.w-richtext figure[data-rt-type="image"] {
  display: table;
  transform: rotate(90deg);
}
.w-richtext figure.w-richtext-figure-type-image-rotate > div,
.w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.w-richtext figure.w-richtext-figure-type-image-rotate > figcaption,
.w-richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image-  rotate > div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

Answer 1

CSS旋转在屏幕上滚动项目，具体取决于您旋转的度数。因此，您需要增加其边距，在CSS中尝试使用以下图像。

位置：静态;

margin-top：84px;

图像旋转：CSS

1 个答案: