SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Animation Conundrum

    So Iíve decided to go through a book - cover to cover covering some int-adv animations. And iím touching on EVERY example. No matter how rudimentary or obvious it may seem. You know, like stretching before a game of bball. Well. thank the lord I didÖ I have this silly bit of code that has been throwing me for a loop.

    Iím just trying to skew this img positively in the x direction aaaaaaaand, itís working - but backwards.
    What the hell?? Is there something iím not seeing here??

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple CSS3 Transformation</title> </head>
    <body>
    <img src="img/blackmilk.jpg" alt="Black Milk" style="width: 300px; height: 300px; float: left; margin: 0 2em 1.4em 0;
    -moz-transform: skewX(21deg); -o-transform: skewX(21deg);
    -ms-transform: skewX(21deg); -webkit-transform: skewX(21deg);
    transform: skewX(21deg);
    ">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper.</p>
    </body>
    </html>
    simple: img. content, some inline css, and itís leaning left instead of right.

    And this is not the only bit. Some of my other examples arenít working either (scaling). So there must be something wrong here.

    ?

  2. #2
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ..aaaaaaand i'm a complete idiot. I figured this one out. Thx!

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,182
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    So, was it -21deg or skewY that worked?

  4. #4
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,336
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    ..aaaaaaand i'm a complete idiot.
    I disagree. You not only used the word 'conundrum' [properly] in a forum post, you even spelled it correctly!
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    I disagree. You not only used the word 'conundrum' [properly] in a forum post, you even spelled it correctly!
    Ha. The best part? IT RHYMES. Now THAT's how you write a heading.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    So, was it -21deg or skewY that worked?
    The author wrote me back and sent me a codepen to show me i wasn't crazy. http://bit.ly/1gK91bA

    So I'll go as such moving fwd.


Tags for this Thread

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
  •