Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Question Rotate a DIV by 35 degrees

    Hi.

    I need to rotate a DIV by 35 degrees... i'm guessing it'll need a bit of javascript but i'm a bit clueless to be honest... anyone able to point me in the right direction.?

    If it helps here's a link to the DIV i'm trying to rotate.

    www.tombrennand.net/ppp/rotate.htm

    thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    A div can't be rotated. You can only go horizontal or vertical hence why its called the box model. To create a diagonal look you will need to use images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    ok, so i guess i could rotate an image inside a DIV. I could work around that if i knew how...

    any ideas?

    tom

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm no. You can't have anything placed at an angle using just html and javascript. You need to create the effect of a diagonal image in a graphics program. Images can only be square. You might be better off using Java or Flash to create a diagonal effect.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    For some reason I think you can use an IE filter for that (although that might only be 90 degree rotations). Otherwise, you could use SVG and a <foreignObject> tag, but you wouldn't find support for rotations on that anywhere in supported browser releases.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    I think the canvas element WhatWG defines can do it in too.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup IE has filter which can be used to rotate, using the BasicImage filter. eg.

    #div {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }


    BUT - that only supports 90, 180, and 270 degree rotations, so it will not place things at an angle.

    Using images is the best way.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    think you can rotate by a float value and offset the object but the rotation point and math is a problem but trial and error may surfice for a set rotation.


  •  

    Posting Permissions

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