CODEWITHSUNDEEP
cssrotation
user1550997
user1550997

Reputation: 33

CSS rotate moves DIV from side of page

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

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.

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.

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;

Greatful if anyone could help. Cheers.

Upvotes: 3

Views: 10796

Answers (3)

Prashobh
Prashobh

Reputation: 9542

You can use 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

Upvotes: 1

SVS
SVS

Reputation: 4275

Use transform-origin:

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

Upvotes: 3

Dan Lister
Dan Lister

Reputation: 2583

Take a look at -webkit-transform-origin. As your element is fixed, you may need to amend the transform origin accordingly.

Upvotes: 1

Related Questions