CSS旋转从页面的一侧移动DIV答案

【问题标题】：CSS rotate moves DIV from side of pageCSS旋转从页面的一侧移动DIV
【发布时间】：2012-07-25 17:25:13
【问题描述】：

我正在尝试创建一个侧标签，如在其基本形式中找到的here。 http://www.firstforturf.co.uk/quotation.php

我正在尝试尽可能多地使用 CSS 而不是仅仅放入图像，但是我遇到了问题。

旋转侧面 DIV 时，它会从页面的侧面移动。我尝试将边距设置为 0，但它似乎不起作用。

如果有帮助，这里是侧标签的 CSS 规则。

    color: #FFF;
    height: 50px;
    width: 200px;
    position: fixed;
    background-color: rgb(0,102,204);
    font-size: 32px;
    line-height: 50px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    top: 50%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    writing-mode: tb-rl;

如果有人可以提供帮助，那就太好了。干杯。

【问题讨论】：

标签： css rotation

【解决方案1】：

使用transform-origin:

-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;

【讨论】：

【解决方案2】：

看看-webkit-transform-origin。由于您的元素是固定的，您可能需要相应地修改变换原点。

【讨论】：

【解决方案3】：

你可以使用transform-orign:

transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

try this link

【讨论】：