sam*_*per 13 css transform css3
考虑以下尝试将一个段落旋转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这里的财产用处不大.例如,如果使用的transform-origin: top right;那个,则#text需要向下移动它旋转前的宽度.
我的问题:有没有办法告诉浏览器在轮换后应用CSS定位属性; 如果没有,那么是否有一种方法可以#text向下移动(例如使用top:)它旋转前的宽度？
NB.理想情况下,解决方案不应要求width:为其设置固定#text,并且不得要求JavaScript.
您可以对一个元素应用多个变换，并且顺序很重要。这是最简单的解决方案：http : //jsfiddle.net/aNscn/41/
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
background: lightBlue;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translate(100%) rotate(90deg);
transform-origin: left top;
-webkit-transform: translate(100%) rotate(90deg);
-webkit-transform-origin: left top;
}
变换原点是应用变换的点。例如，rotate() 函数的变换原点是旋转中心 - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
小智 5
旋转-90°
.rotate {
position:absolute;
-webkit-transform-origin: left top;
/* Safari */
-webkit-transform: rotate(-90deg) translateX(-100%);
/* Firefox */
-moz-transform: rotate(-90deg) translateX(-100%);
/* IE */
-ms-transform: rotate(-90deg) translateX(-100%);
/* Opera */
-o-transform: rotate(-90deg) translateX(-100%);
}