在CSS中定位AFTER变换?

前端之家收集整理的这篇文章主要介绍了在CSS中定位AFTER变换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
考虑以下尝试将一个段落旋转90度并将其定位,使得最初位于其左上角的角(因此在旋转后成为其右上角)最终位于该角的右上角.父块.

HTML

<!DOCTYPE html>
<html>
<body>
  <div id="outer">
    <p id="text">Foo bar</p>
  </div>
</body>
</html>

CSS:

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
        transform: rotate(90deg); 
        position: absolute;
        top: 0;
        right: 0;
}

在OS X 10.6.8上的Firefox 19.0.2中,它失败了.这似乎是因为,尽管给出了CSS属性的顺序,但在定位之后应用转换.换句话说,浏览器:

>将#text置于其右上角位于父块的右上角,但仅限于此
>旋转它,结果现在它的右上角不在父块的右上角.

因此,transform-origin属性在这里没有多大用处.例如,如果一个人使用了变换原点:右上角;然后#text需要按照它旋转之前的宽度向下移动.

我的问题:有没有办法告诉浏览器在轮换后应用CSS定位属性;如果没有,那么有没有办法向下移动#text(例如使用top :)按旋转之前的宽度?

NB.理想情况下,解决方案不应要求设置固定宽度:对于#text,并且不得要求JavaScript.

解决方法

解决here

这是我添加代码

left: 100%;
width: 100%;
-webkit-transform-origin: left top;

我还添加了一些前缀转换属性,因此它将是跨浏览器

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

我是怎么做到的

我发现了this问题,并且正如网站名称所说,“摆弄”代码获取此行为.我想解决方案是:100%;而不是右:0;.

(宽度:100%;是否因为某种原因它不是100%而且文本会溢出到下一行)

原文链接:https://www.f2er.com/css/215574.html

猜你在找的CSS相关文章