Ajax Loader
×

Solitary CSS3 Slider (Rotation Transition)

Yet another transition for my pure CSS3 Slider that I had already posted on CSSDeck recently. You can also see the other transitions. Just navigate through these links below.

  1. Fade
  2. Zoom

In this transition, I used CSS3's rotateZ property to rotate the image to 10 degrees once the respective navigation button is clicked and then fade it away. This looks really beautiful. We can also use rotateY and rotateX properties to create a "flip" effect instead of the "rotation" effect shown here.

Feel free to add something valuable to the code and use it anywhere you like without any conditions or limits. :) 

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

5 Comments

× New

Sign In to comment

vaslag:

Is possible to add an auto play?

yeady:

is there a way to link the slider images to navigate to different web pages? I cannot get this to work properly.

Thanks

Rishabh :

Well, that is one and only flaw that'll keep most of us away from using a Pure CSS3 Slider and keep a JS based slider as the front runner. The changing of slides is basically achieved with CSS3 :target pseudo class (which basically adds hash tags to the URL). So if your page does not has a scrollbar then its fine, but if it has them then you will notice the page jumping down. Try Out this Full View and keep on noticing the URL changes as the different slider controls are clicked.

Kushagra Agarwal:

Yes, I can do that but I will have to remove those navigation elements to make it work properly. I may upload a slider of that kind (auto scrolling and no navigation) soon :)

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+