dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS3 Transform

  1. #1
    Join Date
    Feb 2009
    Posts
    22

    CSS3 Transform

    I'm building a photo gallery template with a box grid of photo thumbnails. When hovering over a thumbnail the image is suppose to scale larger.

    I've been asked to use CSS3 transformations for this effect. Though I'm wondering if jQuery effects are more practical. How much support does transform have across browsers? IE would have to use something like filter, yes?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Usually, IE (at least 7 and 8) are behind the rest of the browsers while implementing CSS3, and yes, it provides an intricate alternate solution using filter.

    But, the main question is: do you want a continuous scaling (in movement) or a simple and suddenly one (from a single move). In the first case you need a JavaScript solution by all means. And, yes, JQuery might ease your work in this case.

    I would opt for a JavaScript solution. CS3 is still inconsistent among the browsers.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    I think you may have meant CSS3 "transitions" in your post - which can look virtually identical to Javascript animations.

    If you're a developer who's always looking to stay on his game and stay at the current edge of web development, I'd recommend test out CSS3 transitions with a Javascript fallback for all versions of IE and Firefox <4.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by aj_nsc View Post
    I think you may have meant CSS3 "transitions" in your post - which can look virtually identical to Javascript animations.
    Hm... can you bring an example?

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    First of all, note that I said "CAN" look like JS animations, and second of all, here are two templates that I programmed in the past week to use CSS3 instead of JS. I didn't bother putting JS fallback on the first one because, other than experience, they don't hinder the user's ability to use the website in any way, and I'd rather that IE users eventually realize what they're missing when they see someone open up a website and they say "Hey, that didn't fade/slide down when I saw it on my computer"


    CSS3 Transitions:

    http://www.oneillmotors.com.php5-21.....com/template/

    Dropdown Menu and hover links on "Brands" navigation link
    Hover effects on links when you hover over company logos
    Slide-out divs that appear when you hover over any of the main images

    http://www.customcabinets.ca.php5-20...com/template/#

    Accordion slider on the left is 99&#37; CSS3, all I had to do was to use Javascript to change the target (window.location.hash) if the user clicked on an accordion panel that was already open.


    These are personal examples (and fairly weak ones, at that), google will provide you with a thousand more that look amazing.

    EDIT: Like this one that uses CSS3 (but I think it's based on animations rather than transitions) - http://kickoffapp.com/

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    aha. Ok, thanks. Interesting.

    http://www.oneillmotors.com.php5-21.....com/template/
    Of course, IE will not make a smooth transition

    A note about the site above: Move your comments from the top of the document below the Doctype. The Doctype should be the first line of the document. Anything written above might spoil things. For instance, IE will display the document in quirks mode, by default. I had to set manually the document's mode

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    Of course, as I pointed out also, IE will not make a smooth transition UNLESS you provide a JS fallback in which case you can mimic the transition exactly, but thanks for reiterating.

    I was unaware of the quirksmode issue if anything was before the doctype. Fortunately, this is the base HTML template for a dynamic website to be built off of and the comments, as I'm sure you could tell, are used for the backend team and won't appear on the final site. Good info to know, though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles