SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    OK I'm stumped!?

    I'm making a css3 only Polaroid effect for my personal site. I was almost all done but I hit a snag here trying to combine multiple effects. See..

    on hover spin
    http://www.visibilityinherit.com/projects/spin.html

    on hover NO spin
    http://www.visibilityinherit.com/projects/polaroid.html

    I WANT it to spin. It stops spinning in all browsers if I either add "scale(1.5,1.5)" to the :hover OR add "transform:rotate(10deg);" to it's default state. It seems the way I have it it cant do all three. Can you find a way to make it do all three effects? Thanks

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    To clarify: I want it to start 10 degrees rotated - spin on hover - and get 50% bigger while doing it. Like this but of course 10% rotated in its default state. http://www.visibilityinherit.com/projects/spin+.html

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok I solved it! I'll upload it later and show

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I solved it. When it reminded me of the IE png animate and hover bug fix I realized how to fix it. The fix is to put the default rotation on the li and the hover rotation on the a. http://www.visibilityinherit.com/projects/polaroid.html

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Eric. Another CSS3 test to bookmark for when I get into it!

    What are all those egs you have in your code, though?

    -ms-transform:rotate(10eg);
    -moz-transform:rotate(10eg);

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nice work, Eric. Another CSS3 test to bookmark for when I get into it!

    What are all those egs you have in your code, though?

    -ms-transform:rotate(10eg);
    -moz-transform:rotate(10eg);
    Thanks for catching that. Just copy paste errors. I prob never would have seen it.

    Here is another cool iteration of that. Polaroid gallery. I'll make a tut for it. http://www.visibilityinherit.com/pro...id-gallery.php

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Woo! Looks cool. (Ha ha, you need to warn people who have problems with things flashing etc. )


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
  •