gpt4 book ai didi

html - 如何将旋转的元素居中并将其与顶部对齐?

转载 作者:行者123 更新时间:2023-12-02 19:19:04 24 4
gpt4 key购买 nike

* {
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
margin: 0px;
}

.we-adopt {
background-color: #8a8484;
color: #ffffff;
padding: 88px 0px;
height: 100px;
}

.we-adopt-list span {
display: inline-block;
vertical-align: top;
padding: 16px 60px 16px 24px;
background-color: #222222;
color: #ffffff;
width: 100%;
}

.we-adopt-list li {
color: #FFFFFF;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 70px;
text-transform: uppercase;
}

.we-adopt-list ul {
display: inline-block;
transform: rotate(-90deg) translateY(-50%);
position: relative;
left: 50%;
}

.we-adopt-list {
position: relative;
}

.we-adopt-list li:last-child {
margin-bottom: 0px;
}
<section class="we-adopt" style="height: 100px;">

</section>
<section class="we-adopt-wrap">
<div class="container">
<div class="we-adopt-list">
<ul>
<li><span>Mental agility</span></li>
<li><span>Emotional agility</span></li>
<li><span>Trust</span></li>
</ul>
</div>
</div>
</section>

每当我将 transform-rotate 属性应用到我的列表部分时,它就会重叠,或者有时它会占用上面内容的空间。

案例1

enter image description here

案例2

enter image description here

应用transform-rotate后,我想从上面的灰色部分开始列表部分,没有间距,如下图所示。

预期结果

enter image description here

还有其他方法可以创建这种设计吗?

最佳答案

考虑transform-origin并更新transform,如下所示:

* {
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
margin: 0px;
}

.we-adopt {
background-color: #8a8484;
color: #ffffff;
padding: 88px 0px;
height: 100px;
}

.we-adopt-list span {
display: inline-block;
vertical-align: top;
padding: 16px 60px 16px 24px;
background-color: #222222;
color: #ffffff;
width: 100%;
}

.we-adopt-list li {
color: #FFFFFF;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 70px;
text-transform: uppercase;
}

.we-adopt-list ul {
display: inline-block;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%) translateY(-50%);
position: relative;
margin: 0;
left: 50%;
}

.we-adopt-list {
position: relative;
}

.we-adopt-list li:last-child {
margin-bottom: 0px;
}
<section class="we-adopt" style="height: 100px;">

</section>
<section class="we-adopt-wrap">
<div class="container">
<div class="we-adopt-list">
<ul>
<li><span>Mental agility</span></li>
<li><span>Emotional agility</span></li>
<li><span>Trust</span></li>
</ul>
</div>
</div>
</section>

关于html - 如何将旋转的元素居中并将其与顶部对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63297064/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com