旋转的文本产生不一致的结果

时间：2016-01-12 14:23:11

标签： css css3 rotation css-transforms

我试图显示旋转的文本，使其始终绝对位于其父级的底部。父级是浏览器窗口的100％高度，我希望所有浏览器/屏幕大小的文本从底部显示50px。

这是我的代码：

＆＃13;
＆＃13; 
html,body,.carousel,.carousel a.item { height: 100%; }
.carousel a.item {
  height: 100%;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
  width: 25%;
  float: left;
}
.rotate {
  zoom: 1;
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: block;
  width: 100%;
  background: pink;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.carousel a.item h1 {
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: blue;
  z-index: 5;
  display: block;
}
.bg-image {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
＆＃13; 
<div class="carousel">
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate">
      <h1>Some really long title thats quite long. Did I say it was long?</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate">
      <h1>This is really short</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate">
      <h1>Short but also longer but not to long</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate">
      <h1>Some really long title thats quite long. Did I say it was long?</h1>
    </div>
  </a>

</div>
＆＃13;
＆＃13;
＆＃13;

到目前为止，我对我的代码设置了一个小提示：https://jsfiddle.net/77xzfsfa/这里是我想要实现的目标的图像：

enter image description here

4 个答案:

答案 0 :(得分：1)

您无需绝对定位旋转元素的内容。

只需调整变换并变换原点。

.rotate{
    zoom: 1;
  white-space: nowrap;
  position: absolute;
  z-index: 3;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 50px;
  transform:translate(100%,0%) rotate(-90deg);
  transform-origin:bottom left;
}


.carousel a.item h1 {
    color: #fff;
    z-index: 5;
}


* {
  margin: 0;
}
html,
body,
.carousel,
.carousel a.item {
  height: 100%;
}
.carousel a.item {
  height: 100%;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
  width: 25%;
  float: left;
}
.rotate {
  zoom: 1;
  white-space: nowrap;
  position: absolute;
  z-index: 3;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 50px;
  transform: translate(100%, 0%) rotate(-90deg);
  transform-origin: bottom left;
}
.carousel a.item h1 {
  color: #fff;
  z-index: 5;
}
.bg-image {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<div class="carousel">
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate">
      <h1>Some really long title thats quite long. Did I say it was long?</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate">
      <h1>This is really short</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate">
      <h1>Short but also longer but not to long</h1>
    </div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate">
      <h1>Some really long title thats quite long. Did I say it was long?</h1>
    </div>
  </a>

</div>

答案 1 :(得分：0)

当你放旋转：-90px

真正的底部是左边

真正的权利是底层

然后我们可以说：

 bottom -> right
 right -> top
 top -> left
 left -> bottom

但是当你放在这里

 left: 0px;

它实际上不是0px;

因为从水平位置的div中心计算

代码将正确

像这样

.carousel a.item h1 {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    position: absolute; bottom:10px; left: 150px;
    height: 100%;
    width: 100%;
    background: blue;
    z-index: 5;
    display: block;
}

答案 2 :(得分：0)

您需要调整变换原点和.rotate元素的位置，如下所示：

html,body,.carousel,.carousel a.item { height: 100%; }
.carousel a.item {
  height: 100%;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
  width: 25%;
  float: left;
}
.rotate {
  white-space: nowrap;
  position: absolute;
  bottom: 50px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
}
.carousel a.item h1 {
  color: #fff;
}
.bg-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
<div class="carousel">
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate"><h1>Some really long title thats quite long. Did I say it was long?</h1></div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate"><h1>This is really short</h1></div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
    <div class="rotate"><h1>Short but also longer but not to long</h1></div>
  </a>
  <a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
    <div class="rotate"><h1>Some really long title thats quite long. Did I say it was long?</h1></div>
  </a>

</div>

请注意，我删除了代码段中的所有供应商前缀以获得答案简洁性并删除了不必要的CSS。

答案 3 :(得分：0)

试试这个，只需将<br>放在代码中：

<div class="rotate"> <h1>Short but also longer but not to long</h1> <br> </div>

相关问题
最新问题