Html 在响应式设计中，是否只有CSS才能旋转90度？

我有一个（很好？）响应性的桌子设计（用flex完成）-如果显示器足够宽，它看起来像这样（标签“c”和“d”旋转-90）：

如果它变小，它会变为：

|aaaaaaa|bbbbbbb|
|c      |d      |
|c      |d      |
|c      |d      |
+-------+-------+
|   1111|   2222|
|3      |4      |   
+-------+-------+
|   xxxx|   yyyy|
|z      |?      |

到目前为止，一切都很好，工作正常，只是在玩弄变换和填充

编辑：诀窍是使所有旋转的标签具有相同的高度和宽度

比如说，现在我必须给标签加上背景，问题是，c&d的旋转div有一个适合我逻辑的固定高度和宽度

编辑：问题是翻译的文本不再适合

但他们应该：

width: 100%parent_height;
height: 100%parent_width;

不要谈论

顶部

和

左侧

我的jQuery解决方案如下所示（仅转换H和W）：

需要的时候给它打电话

$(window).load( =>
    rotate90()
    $(window).on('resize.rotate90', rotate90)   
)

背后的css很简单

.rotate90 {
  transform: rotate(-90deg);
  text-align: left;
  width:100%;
  height:100%;
  position: absolute;
}

但是有没有办法不使用脚本

您可以使用

@media screen and (min-width: 480px) {
     .rotate90 {
       transform: rotate(-90deg);
       text-align: left;
       width:100%;
       height:100%;
       position: absolute;
}

Google different@media screen varients，根据您的设备屏幕大小查找您想要使用的屏幕

创建旋转不需要脚本

您可能还想为css添加一个过渡时间，以便它更平滑

.rotate90{
transition: 2s;
 -webkit-transition: 2s;
}

---

你能为这个提供一个JSFIDLE吗？@Juanín:是的，但是需要一点时间，我不允许在这里剪切粘贴真实代码…创建一个FIDDLE旋转不依赖于视图宽度，这不是问题所在

@media screen and (min-width: 480px) {
     .rotate90 {
       transform: rotate(-90deg);
       text-align: left;
       width:100%;
       height:100%;
       position: absolute;
}

.rotate90{
transition: 2s;
 -webkit-transition: 2s;
}