图片旋转：CSS

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中尝试下面的图像。

position：static;

margin-top：84px;