CSS旋转从页面的一侧移动DIV [英] CSS rotate moves DIV from side of page

问题描述

我正在尝试创建一个边标记，如基本表单中所示。 http://www.firstforturf.co.uk/quotation.php

I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php

我试图尽可能多使用CSS而不是只是放入一个图像，但我遇到了一个问题。

I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.

旋转边DIV时，它从页面的一侧移动。我已经尝试将边距设置为0，但似乎没有工作。

Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.

如果有帮助，下面是sidetag的CSS规则。

If it helps, here are the CSS rules for sidetag.

    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;

如果有人可以帮助，非常好。 Cheers。

Greatful if anyone could help. Cheers.

推荐答案

使用 transform-origin ：

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

这篇关于CSS旋转从页面的一侧移动DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！