您应该使用
transform-origin来调整转换点,以及定位属性的一些创造性使用.
CSS:
#Box {
padding: 30px;
position: relative;
border: 1px solid blue;
}
#Box > div {
border: 1px solid red;
position: absolute;
top: 0;
right: 100%;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: right top;
-moz-transform: rotate(270deg);
-moz-transform-origin: right top;
-ms-transform: rotate(270deg);
-ms-transform-origin: right top;
-o-transform: rotate(270deg);
-o-transform-origin: right top;
transform: rotate(270deg);
transform-origin: right top;
}
HTML:
hello
rotated!