作者:啊123 | 来源:互联网 | 2023-05-22 16:27
我需要一些帮助,试图了解它是如何transform-origin
工作的,我已经完成了我的谷歌搜索,但找不到任何可以帮助我的具体用例的东西.这就是我想要实现的目标:
我有一个固定高度的固定页脚,我有两行旋转文本(左栏),我怎样才能完全控制它的位置?目前它从页脚顶部开始,完全在页脚之外,我设置了一个小提示来显示我当前的代码:http://jsfiddle.net/eury7f6f/
任何人都有任何想法如何实现我想要的?
.vertical-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Nils Kaspers..
16
想想把transform-origin
钉子撞到挡块上.A transform-origin: right bottom
围绕其右下角旋转元素.
2d语法是:transform-origin: x y
,where 0 0
is left top
和100% 100%
is right bottom
.
至于手头的问题; 而不是旋转实际的文本元素,我将它们包装在另一个元素中,并围绕它的右上角旋转该元素.然后将该元素包装在另一个元素上,并将其元素的100%向后移动到左侧.然后可以像往常一样绝对定位此元素.
如果您愿意,这将允许您保持堆叠元素并将其从内容流中取出.
这看起来像这样:
HTML
© Copyright Some vertical text.
Oh my god some really long vertical text...how long?!
CSS
.position-me {
transform: translateX(-100%);
}
.rotate-me {
transform: rotate(-90deg);
transform-origin: right top;
text-align: right;
}
这是一支钢笔.
1> Nils Kaspers..:
想想把transform-origin
钉子撞到挡块上.A transform-origin: right bottom
围绕其右下角旋转元素.
2d语法是:transform-origin: x y
,where 0 0
is left top
和100% 100%
is right bottom
.
至于手头的问题; 而不是旋转实际的文本元素,我将它们包装在另一个元素中,并围绕它的右上角旋转该元素.然后将该元素包装在另一个元素上,并将其元素的100%向后移动到左侧.然后可以像往常一样绝对定位此元素.
如果您愿意,这将允许您保持堆叠元素并将其从内容流中取出.
这看起来像这样:
HTML
© Copyright Some vertical text.
Oh my god some really long vertical text...how long?!
CSS
.position-me {
transform: translateX(-100%);
}
.rotate-me {
transform: rotate(-90deg);
transform-origin: right top;
text-align: right;
}
这是一支钢笔.