分享程序员开发的那些事...
更新时间：2023-02-01 21:39:53
您需要调整 .rotate 元素的转换原点和定位，如下所示：
html，body，.carousel，.carousel a.item {height：100％; }。carousel a.item {height：100％; padding-top：100px;位置：相对; overflow：hidden;宽度：25％; float：left;}。rotate {white-space：nowrap; position：absolute; bottom：50px;左：100％; transform-origin：left bottom; transform：rotate（-90deg）;}。carousel a.item h1 {color：#fff;}。bg-image {background-repeat：no-repeat; background-position：中心; background-size：cover;}
< div class = carousel> < a href =＃class =item bg-imagestyle =background-image：url（'https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800& ; w = 300& h = 800'）; < div class =rotate>< h1>一些很长的标题很长。我说它很长吗？< / h1>< / div> < / a> < a href =＃class =item bg-imagestyle =background-image：url（'http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg' ）;> < div class =rotate>< h1>这真的很短< / h1>< / div> < / a> < a href =＃class =item bg-imagestyle =background-image：url（'https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800& ; w = 300& h = 800'）; < div class =rotate>< h1>短但也更长，但不长于< / h1>< / div> < / a> < a href =＃class =item bg-imagestyle =background-image：url（'http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg' ）;> < div class =rotate>< h1>一些很长的标题很长。我说它很长吗？< / h1>< / div> < / a>< / div>
请注意，我移除了代码段中的所有供应商前缀，并删除了不必要的CSS。
I'm trying to display rotated text whereby its always absolute positioned to the bottom of its parent. The parent is 100% height of the browser window and I'd like the text to appear 50px from the bottom for all browser/screen sizes.
Here's my code:
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;
}
<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>
I have a fiddle setup of my code so far: https://jsfiddle.net/77xzfsfa/ and here's an image of what I'm trying to achieve:
You need to tweak the transform-origin and the positioning of the .rotate element like this :
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>
Note that I removed all the vendor prefixes in the snippet for answer brievity and removed unecessary CSS.