Question

我想将连续div - 垂直方向与其内容 using CSS进行对比。所以我使用了transform：rotation（）方法。如果我使用了以下代码，它会重叠。

输入：

<html>
<head>
    <style type='text/css'>
    .container{
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        margin:10px;
        background-color:#ffceff;       
    }
    </style>
</head>
<body>
    <div class='container '>
       <span>Rotate Me</span>
    </div>
    <div class='container '>
       <span>Rotate Me</span>
    </div>
</body>
</html>

输出

预期输出

有人可以为此提出解决方案吗？

注意：

如果我使用display: inline-block，那么它不会重叠，但是容器宽度的空间在旋转后占据容器之间。

Answer 1

您需要将所有元素放在一个容器中，然后旋转这个元素

    .container{
        -webkit-transform:  translateY(-100%) rotate(90deg) ;
        transform:  translateY(-100%) rotate(90deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        margin:10px;
        background-color:#ffceff;       
    }

    <div class='container'>
      <div>
       <span>Rotate Me</span>
        </div>
      <div>
       <span>Rotate Me</span>
        </div>
    </div>

Answer 2

我找到了解决方案，我们必须添加一个“外部”标签并指定一个宽度，溢出数据将用withhe-space：nowrap代码修复，请尝试以下代码：

CSS：

.outer {
white-space: nowrap;
display: inline-block;
width: 20px;
}
.container {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left 0px;
    margin:10px;
}

HTML：

<div class='outer'>
    <div class='container' style="background-color: red;">
       <span>Rotate Measdadadadsasd</span>
    </div>
</div>

<div class='outer'>
    <div class='container' style="background-color: blue;">
       <span>Rotate Me</span>
    </div>
</div>

使用It的内容问题旋转div

2 个答案: