Question

目前，我正试图设计一种按钮，当它悬停在它上面时，会在网站左侧显示一段文字。

http://i.imgur.com/9UC7QAs.png

但是，你可以看到我的问题是，在旋转文本的div容器-90度然后文本本身+90度以平衡它后，文本退出屏幕，我似乎无法找到一种解决方法，使其适合div的蓝色区域。

HTML：

<div class="wrap2">
 <div class="text2">
  <p class="rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc ornare volutpat ante vitae tempor. `enter code here`Suspendisse sapien augue, imperdiet 
id nisl sit amet, eleifend vestibulum metus. Donec fermentum et arcu ut 
bibendum.
   </p>
</div>
 <div class="left">Lorem</div>
  </div>

CSS：

        .wrap2 {
        margin: -270px 0 0 -170px;
        width: 330px;
        height: 0;
        padding: 0 12px 12px 12px;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .text2 {
        width: 330px;
        height: 0;
        font-size: 18px;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        text-align: center;
        background: #C6F6FF;
        transition: 1s all;
        font-family: 'Josefin Slab', serif;
        overflow: hidden;
        color: rgba(67, 67, 67, 1);
    }

    .left {
        width: 120px;
        font-family: 'Josefin Slab', serif;
        transition: 1s all;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        padding: 7px 5px 0 5px;
        margin: 0 auto;
        background: #C6F6FF;
        font-size: 26px;
        color: rgba(222, 232,, 1);
        text-align: center;
    }

    .wrap2:hover .text2 {
        height: 140px;
        opacity: 1;
    }

    .wrap2:hover .left {
        opacity: 1;
    }

    .rotate {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

Answer 1

您可以使用writing-mode和flex模型来避免处理转换： （min-height optionnal，此处为演示目的）

＆＃13;

.wrap2 {
  display: inline-flex;
  align-items: center;
  min-height: 90vh; /* ? do you need something of that kind ? */
  background: lightblue;
  margin:0 1em
}

.text2 {
  max-width: 0;
  overflow: hidden;
  transition: 1s
}

.rotate {
  width: 300px;
}

.left {
  writing-mode: vertical-rl;
  width: 1em;
  ;
  background: lightblue;
  padding: 1em 0.5em;
  border-radius: 0 1.5em 1.5em 0;
  margin-right: -2em
}

.wrap2:hover .text2 {
  max-width: 300px;
}

＆＃13;

<div class="wrap2">
  <div class="text2">
    <p class="rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare volutpat ante vitae tempor. `enter code here`Suspendisse sapien augue, imperdiet id nisl sit amet, eleifend vestibulum metus. Donec fermentum et arcu ut bibendum.
    </p>
  </div>
  <div class="left">Lorem</div>
</div>

＆＃13;

旋转

1 个答案: