Tilted carousel (diagonal) in jQuery and CSS

Asked

Viewed 508 times

5

I need to make a tilted carousel (diagonally as per image) but with transition between movements.

I even prototyped something in this Jsfiddle but the movement is only working on the "back" button, yet with an abrubta transition on the y-axis. When I click on the "next" button, it goes to the next but straight item.

javascript jquery html css3
  • 2

    To do the "diagonal" effect you can use the CSS3 attribute skew(). Example

1 answer

3


If you don’t need to natively support Internet Explorer 8, you can use the CSS Transform property:

.carousel{
    transform: rotate(-5deg)
}

http://jsfiddle.net/c7wkoyfc/

  • 1

    IE 6.7 and 8 has filter holder matrix although the coordinates are a nightmare to calculate, there is a online calculator very useful!

  • Thanks, Gustavo and @Zuul! I used the same Rotate. But twice... Once to tilt the <ul> and another to "unincling" the <img> from within the <li>. Just to add, I used the backface-visibility: hidden; to mitigate the pixelization caused by the tilting of the elements in the browsers.

  • transform: rotate(-5deg) skew(-5deg); would give exactly the effect of the figure. But the question bearing code has a bug.

  • jsfiddle updated: http://jsfiddle.net/dzcosf1h/

Browser other questions tagged javascript jquery html css3

You are not signed in. Login or sign up in order to post.