CSS使用转换原点来定位旋转的元素。
CSS使用转换原点来定位旋转的元素。
提问于 2015-10-01 14:54:50
我不知道如何旋转一个元素，使它位于另一个元素的下面。下面的图像应该说明预期的结果。
以下是我到目前为止尝试过的：
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(90deg);
transform-origin: 24px 24px;
padding-left: 12px;
text-align: left;
}
.div1.originFromRight {
overflow: visible;
}
.originFromRight .div2 {
padding-right: 12px;
text-align: right;
transform: rotate(-90deg);
transform-origin: right top;
}<div class="div1">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromRight">
<button>></button>
<div class="div2">HELLO</div>
</div>
第二个例子基本上是做我想做的，但文本的方向是错误的。
我能得到的最接近的例子是3，但是我需要把它拉回到左边。我尝试过translate，但我无法让它工作，我尝试了100%的否定margin，这几乎是有效的，但基本上没有。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-01 15:35:48
实现预期产出的一种方法是执行以下操作：
- 将
button放在div2中，并将其放置在右侧边缘。 - 绝对将
div2定位在父容器的底部。 - 逆时针方向旋转
div2(-90度)，转换原点在左下。 - 旋转之后，
div2将完全超出容器，因此我们需要在转换堆栈中添加一个额外的translateY(100%)。 - 文本与右边对齐，并添加一个额外的
padding-right(大于按钮的宽度)，以使文本远离按钮。 - 该按钮还将被旋转-90度，因为它是
div2的一个子级，为了避免这种情况(即使按钮文本正确显示)，我们需要应用计数器旋转。
现在，在这种方法中，唯一的缺点是，如果文本长度超出了单行所能容纳的范围，那么它将绕到下一行(看一下第二个示例的片段)。
.div1 {
position: relative;
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
button {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
transform: rotate(90deg);
}
.div2 {
position: absolute;
box-sizing: border-box;
bottom: 0px;
height: 48px;
width: 100%;
padding-right: 60px;
line-height: 48px;
background-color: #999;
text-align: right;
transform: rotate(-90deg) translateY(100%);
transform-origin: left bottom;
}<div class="div1">
<div class="div2">HELLO
<button>></button>
</div>
</div>
<div class="div1">
<div class="div2">HELLO WORLD!!!!!
<button>></button>
</div>
</div>
Stack Overflow用户
发布于 2015-10-01 16:26:58
我以第二个例子为例，将元素反过来旋转。然后用一个额外的translateX固定这个位置
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
padding-left: 12px;
text-align: right;
}<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32890674
复制相关文章
相似问题
腾讯云开发者
