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 4 of 4
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    can page text run at angle other than horiz or vertical?

    Hi,

    Imagine, if you will please, a page on a notice board hanging by one pin at the top left corner. The page is effectively at about 30 degrees from horizontal.

    Can the text in a web page be made to sit at that angle? Is there a 'rotate' attribute or similar in css?

    Maybe it needs to be done with javascript?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there bazz,

    here is an example....
    Code:
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>css3 transform</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    div {
        width:700px;
        padding:10px 20px;
        margin-top:200px;
        border:1px solid #333;
        background-color:#fff;
        box-shadow:#333 10px 10px 20px;
    
        -moz-transform:translate(100px) rotate(20deg);
        -moz-transform-origin:60% 100%;
    
        -webkit-transform:translate(100px) rotate(20deg);
        -webkit-transform-origin:60% 100%;
    
        -o-transform:translate(100px) rotate(20deg); 
        -o-transform-origin:60% 100%;
    
        -ms-transform:translate(100px) rotate(20deg);
        -ms-transform-origin:60% 100%;
    
        transform:translate(100px) rotate(20deg);
        transform-origin:60% 100%;
     }
    </style>
    
    </head>
    <body>
    
    <div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div>
    
    </body>
    </html>
    
    This site...

    ...will tell you which browsers now support it.

    Further reading:-

    coothead
    Last edited by coothead; 01-28-2012 at 09:47 PM.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you coothead.

    That's exactly what I need.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    No problem, you're very welcome.
    coothead


  •  

    Posting Permissions

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