Question

我在页面侧面创建了一个滑出标签。当我使用背景图像作为文本时，它工作正常。现在我想尝试使用CSS。我希望文字转90度。当我这样做时

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

文本适当旋转。然而，它是父div，保持文本没有被旋转。如何将父div重新调整为文本的旋转？我想尝试显示内联块，但是没有用。我试过旋转父div而不是文本，这就打开了一堆新的蠕虫。这是一个显示文本转向的小提琴。如果您将其悬停，则标签会滑出。 https://jsfiddle.net/aLo5egpx/

Answer 1

<html>
  <head></head>
  <body>
  <div id="slideout">
    <div class="slideoutWrap"><div class="slideoutTxt">Avantages offerts par<br>les Grands Lacs</div></div>
    <div id="slideout_inner">
        <h3>Avantages offerts par les Grands Lacs</h3>
            <p>Les caractéristiques et les systèmes naturels des Grands Lacs et du fleuve Saint-Laurent comme l'eau, les rivières, les forêts, les insectes, les poissons et la faune sont des éléments importants pour des communautés en santé. Ils jouent un rôle dans l'économie ontarienne, car ils permettent la création de technologies écologiques innovatrices et nous aident à nous adapter aux effets imprévisibles du changement climatique.</p>
            <p>Les Grands Lacs et le fleuve Saint-Laurent aident à recycler et à purifier l'eau que nous buvons, à absorber les déchets que nous produisons et à tempérer notre climat. Ils sont également une source de nourriture, de combustibles et d'abris. Ils nous permettent de faire des activités récréatives, lesquelles favorisent la santé physique et mentale. La région incite un large éventail de gens de partout dans le monde à vivre, à travailler et à s'amuser en Ontario.</p>
    </div>
</div>

</body>



<style>
#slideout
  {
    position: fixed;
    top: 150px;
    left:0;
    background-color:#6DBBDF;
    transition-duration: 0.3s;
    border-radius: 0 5px 5px 0;
    z-index:1000;
    padding:5px;
  }
.slideoutWrap
  {
    display: inline-block;
    overflow: hidden;
    width: 2.5em;
  }
.slideoutTxt
  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: inline-block;
    color: #FFF;
    text-align:center;
    white-space: nowrap;
    -ms-transform: translate(35%,10%) rotate(90.0deg);  /* IE9+ */
    -webkit-transform: translate(35%,10%) rotate(90.0deg);  /* Safari 3.1+, Chrome */
    transform: translate(35%,10%) rotate(90deg);
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    line-height: 1.5;
  }
.slideoutTxt:after
  {
    content: "";
    display: block;
    margin: -.5em 0 100% ;
  }

#slideout_inner
  {
    position: fixed;
    top: 150px;
    left: -650px;
    width:600px;
    background-color:#00457c;
    background-repeat: repeat-x;
    background-position: left top;
    transition-duration: 0.3s;
    border-radius: 0 0 5px 0;
    z-index:1000;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
  }

#slideout:hover {
  left: 650px;
}
#slideout:hover #slideout_inner {
  left: 0;
  box-shadow:         4px 4px 8px 0px rgba(50, 50, 50, 0.64);
}
#slideout_inner p{ color:#ffffff; }

</style>



</html>

如何旋转文本并使其具有动态的父动作

1 个答案: