SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: css rotation

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    css rotation

    Code CSS:
        /* Safari */
    -webkit-transform: rotate(-90deg);
        /* Firefox */
    -moz-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    okay, so I am using the code above, when it rotates it is also pushed some pixels to the left, and the problem is that firefox and safari seem to push it about 45 pixels to the left while internet explorer is pushing it about 90px making it hard for me to position these elements, is there an easy way to get the 3 browsers to have the same element rotated and either not push it to the left or push the element the same distance?

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox and Safari aren't pushing it to the left, they are rotating from center of item. You can change that by adding transform-origin like this (value format is similar to background-position):
    Code:
    transform-origin: left center;

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CyberAlien View Post
    Firefox and Safari aren't pushing it to the left, they are rotating from center of item. You can change that by adding transform-origin like this (value format is similar to background-position):
    Code:
    transform-origin: left center;

    thank you so much, you helped me find this
    Code CSS:
    -moz-transform: translate(100px) rotate(20deg);
    with that I can set the pixels needed on internet explorer and push the element the pixels needed in firefox to be at the correct position.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •